Mafi kyawun mafita don internationalization (i18n) a cikin Next.js apps

Yadda yake aiki

Yayinda duniya ke kara zama ta duniya baki daya, yana kara zama dole ga masu haɓaka gidan yanar gizo su gina aikace-aikace da zasu iya biyan bukatun masu amfani daga ƙasashe daban-daban da al'adu. Daya daga cikin manyan hanyoyin cimma wannan shi ne ta hanyar internationalization (i18n), wanda ke ba ka damar daidaita aikace-aikacenka zuwa harsuna daban-daban, kudade, da tsarin kwanan wata.

A cikin wannan koyarwar, za mu bincika yadda ake ƙara internationalization a aikace-aikacen React Next.js ɗinka, tare da server side rendering. TL;DR: Ga cikakken misalin anan.

Wannan jagorar tana nufin aikace-aikacen Next.js da ke amfani da Pages Router.
Idan kuna amfani da App Router, don Allah ku duba wannan jagorar maimakon haka.

Mataki na 1: Shigar da ɗakin karatu na i18n

Don aiwatar da internationalization a cikin aikace-aikacen Next.js ɗinku, za mu fara zaɓar ɗakin karatu na i18n. Akwai wasu shahararrun ɗakunan karatu da dama, ciki har da next-intl. Koyaya, a wannan misalin, za mu yi amfani da TacoTranslate.

TacoTranslate yana fassara jimlolin ku kai tsaye zuwa kowace harshe ta amfani da AI mai ci gaba, kuma yana 'yantar da ku daga aikin sarrafa fayilolin JSON masu wahala.

Bari mu girka shi ta amfani da npm a cikin terminal ɗinku:

npm install tacotranslate

Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta

Yanzu da ka shigar da wannan ƙarin fasalin, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate ɗinka, aikin fassara, da makullin API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba sai ka saka kati na bashi ba.

A cikin UI na aikace-aikacen TacoTranslate, ƙirƙiri wani aiki, kuma ka tafi zuwa shafin maɓallan API. Ƙirƙiri maɓalli ɗaya read, da kuma maɓalli ɗaya read/write. Za mu ajiye su a matsayin canje-canje na muhalli. Maɓallin read shine abin da muke kira public, kuma maɓallin read/write shine secret. Misali, za ka iya ƙara su cikin fayil ɗin .env a tushen aikin ka.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tabbatar cewa ba ka taɓa bayyana asirin maɓallin API na read/write ga yanayin samarwa na ɓangaren abokin ciniki ba.

Zamu kuma ƙara wasu gudunmawar mahalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE da TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Lambar wurin yare na tsoho idan ba a sami wanda ya dace ba. A wannan misalin, za mu saita shi zuwa en don Turanci.
• TACOTRANSLATE_ORIGIN: “Folder” inda za a adana jumlolin ku, kamar adireshin gidan yanar gizonku (URL). Kara karantawa game da asali a nan.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Mataki na 3: Saita TacoTranslate

Don haɗa TacoTranslate da aikace-aikacenku, za ku buƙaci ƙirƙirar abokin hulɗa ta amfani da maɓallan API daga baya. Misali, ƙirƙiri fayil mai suna /tacotranslate-client.js.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY ??
		'',
	projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Za mu ƙayyade TACOTRANSLATE_API_KEY ta atomatik nan ba da jimawa ba.

Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sa ya fi sauƙi a yi amfani da shi nan gaba. Yanzu, ta amfani da ƙayyadadden /pages/_app.tsx, za mu ƙara mai bayar da TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Idan kuna da na musamman pageProps da _app.tsx, don Allah ku ƙara fassarar tare da abubuwan da kuke da su da kuma lambar daga sama.

Mataki na 4: Aiwhataccen fassara daga ɓangaren uwar garke

TacoTranslate yana ba da damar fassarar ɓangaren uwar garke na fassarar ku. Wannan yana inganta ƙwarewar mai amfani sosai ta hanyar nuna abun ciki da aka fassara nan da nan, maimakon ganin abun ciki mara fassara na ɗan lokaci da farko. Bugu da ƙari, za mu iya tsallake buƙatun hanyar sadarwa a ɓangaren abokin ciniki, saboda tuni muna da duk fassarar da muke buƙata.

Za mu fara ta hanyar ƙirƙira ko gyara /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		client: tacoTranslateClient,
		isProduction:
			process.env.TACOTRANSLATE_ENV === 'production' ||
			process.env.VERCEL_ENV === 'production' ||
			(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
				process.env.NODE_ENV === 'production'),
	});
};

Gyara duba isProduction don dacewa da saitinka. Idan true, TacoTranslate zai nuna mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko matakin gwaji (isProduction is false), za mu yi amfani da mabuɗin API na sirri read/write don tabbatar da cewa sababbin layuka an aika su don fassara.

Har zuwa yanzu, mun ƙirƙiri aikace-aikacen Next.js tare da jerin harsunan da aka tallafawa kawai. Abu na gaba da za mu yi shi ne ɗaukar fassarar dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps ko getTacoTranslateServerSideProps bisa ga bukatunku.

Wannan ayyukan suna ɗaukar hujjoji guda uku: Ɗaya Next.js Static Props Context abu, saiti na TacoTranslate, da zaɓaɓɓun halaye na Next.js. Lura cewa revalidate a kan getTacoTranslateStaticProps an saita shi zuwa 60 a tsoho, don haka fassarar ku ta kasance sabuntacce.

Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, bari mu ɗauka kana da fayil ɗin shafi kamar /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Ya kamata yanzu ka iya amfani da Translate sashi don fassara jumloli a cikin dukkan React abubuwanka.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Mataki na 5: Fitar da gwaji!

Mun gama! Yanzu aikace-aikacen Next.js dinka zai fassara ta atomatik lokacin da ka ƙara kowanne kirtani zuwa cikin Translate sashi. Ka lura cewa kawai yanayin da ke da izinin read/write a kan mabuɗin API ne zai iya ƙirƙirar sababbin kirtani don a fassara su. Muna ba da shawarar samun yanayin gwaji mai rufaffiyar tsaro inda zaka iya gwada aikace-aikacen samarwa naka tare da irin wannan mabuɗin API, kana ƙara sababbin kirtani kafin a fitar da shi kai tsaye. Wannan zai hana kowa satar sirrin mabuɗin API ɗinka, kuma zai iya hana ɗaurin aikin fassara naka ta hanyar ƙara sababbin kirtani marasa alaƙa.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!