Sida loo hirgeliyo caalamiyeynta (internationalization) ee codsi Next.js ah oo isticmaalaya App Router

Marka adduunku uu noqdo mid si baahsan isku xiran, waxaa aad muhiim u ah in horumariyeyaasha webka ay dhisaan codsiyo u adeegaya isticmaale ka kala yimid dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyadoo la adeegsanayo internationalization (i18n), taasoo kuu oggolaanaysa inaad codsigaaga u waafajiso luuqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

Maqaalkan, waxaan ku sahmin doonnaa sida loo daro internationalization codsigaaga React Next.js, adigoo adeegsanaya server side rendering. TL;DR: Halkan ka daawo tusaalaha buuxa.

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya App Router.
Haddii aad isticmaalayso Pages Router, fadlan eeg hagekan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeynta barnaamijkaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n ah. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jiraan next-intl. Si kastaba ha ahaatee, tusaalahan waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u tarjumaa xarriiqyadaada luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreeyaa maaraynta dhibka badan ee faylasha JSON.

Aynu ku rakibno iyadoo la adeegsanayo npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Samee akoon TacoTranslate oo bilaash ah

Hadda oo aad rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Halkan ka samee akoon. Waa bilaash, waxaana aadan u baahnayn inaad ku darto kaar deyn.

Gudaha TacoTranslate UI-ga codsiga, abuuro mashruuc, kadibna u gudub tabka furayaasha API-ga. Abuuri hal furaha read iyo hal furaha read/write. Waxaan ku kaydin doonaa sidii doorsoomayaal deegaanka. Furaha read waa waxa aan ugu yeerno public halka furaha read/write uu yahay secret. Tusaale ahaan, waxaad ku dari kartaa faylka .env ee xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Xaqiiji in aadan marnaba sirta read/write API key u faafin deegaanada wax-soo-saarka dhinaca macaamiisha.

Waxaan sidoo kale ku dari doonaa laba kale oo deegaanka ku saabsan: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda la isticmaalayo marka hore oo ah midka cayiman. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: "Folder"-ka meesha xarafyadaada lagu keydin doono, sida URL-ka boggaaga internetka. Halkan wax badan ka akhri asalka.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhex darto codsigaaga, waxaad u baahan doontaa inaad abuurto client adoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuri feyl magaca /tacotranslate-client.js ah.

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Waxaan si otomaatig ah u qeexi doonnaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE dhowaan.

Abuurista client-ka fayl gooni ah waxay ka dhigeysaa mid sahlan in mar kale la isticmaalo mustaqbalka. getLocales waa kaliya hawl fudud oo leh qaab maarayn qalad oo horay loo dhisay. Hadda, samee fayl magaca loo bixiyay /app/[locale]/tacotranslate.tsx, halkaas oo aan ku hirgelin doono bixiyaha TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Ogow 'use client'; oo muujinaya in tani ay tahay qayb ka mid ah macmiilka.

Iyada oo bixiyaha macnaha hadda diyaar yahay, abuuro fayl magaca /app/[locale]/layout.tsx, oo ah qaab-dhismeedka asalka ah ee codsigeenna. Ogoow in waddadan ay leedahay gal adeegsanaya Dynamic Routes, halkaas oo [locale] yahay cabbirka firfircoon.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Waxa ugu horreeya ee halkan lagu xusuusto waa inaan isticmaaleyno cabirka Dynamic Route ee [locale] si aan u soo qaadno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams ayaa hubinaya in dhammaan koodhka luqadaha ee aad u hawl gelisay mashruucaaga si horay loo soo diyaariyey.

Hadda, aan dhisno boggeena ugu horreeya! Abuuri fayl la yiraahdo /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

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

Fiiro gaar ah u yeelo isbeddelka revalidate kaas oo u sheegaya Next.js in uu dib u dhiso bogga kadib 60 ilbiriqsi, isla markaana uu cusboonaysiiyo tarjumaadahaaga.

Tallaabada 4: Hirgelinta server-side rendering

TacoTranslate waxay taageertaa server side rendering. Tani waxay si weyn u hagaajinaysaa waayo-aragnimada isticmaale adigoo si degdeg ah u soo bandhigaya waxyaabaha la turjumay, halkii uu marka hore ka noqon lahaa iftiin koobaya waxyaabaha aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan horey u haynaa turjumaadaha aan u baahanahay ee bogga uu isticmaalehu daawanayo.

Si aad u dejiso server side rendering, abuur ama wax ka beddel /next.config.js:

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

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Wax ka bedel hubinta isProduction si ay ugu habboonaato dejintaada. Haddii true, TacoTranslate waxay muuji doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaan maxalli ah, tijaabo, ama horudhac (isProduction is false), waxaanu isticmaali doonaa furaha sirta ah ee read/write si loo hubiyo in xarfo cusub loo diro tarjumaadda.

Si loo xaqiijiyo in socodka iyo dib-u-wareejintu u shaqeeyaan sidii la filayay, waxaan u baahan doonaa inaan abuurno file la yiraahdo /middleware.ts. Anagoo adeegsanayna Middleware, waxaan u leexin karnaa isticmaaleyaasha bogag lagu soo bandhigay luqadda ay doorbidayaan.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Hubi inaad dejiso matcher si waafaqsan dukumentiyada Next.js Middleware.

On the client, waxaad beddeli kartaa kukiyada locale si aad u beddesho luqadda uu isticmaalehu doorbidayo. Fadlan eeg koodhka tusaalaha dhamaystiran si aad fikrado uga hesho sida tan loo sameeyo!

Tallaabada 5: Ku shaqee oo tijaabi!

Waan dhamaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Ogow in kaliya deegaanka leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan ku talinaynaa inaad yeelato deegaan xidhan oo ammaan ah oo tijaabada ah halkaas oo aad ku tijaabin karto codsigaaga wax soo saarka adigoo adeegsanaya furaha API sidan oo kale ah, adigoo ku daraya xarfo cusub ka hor intaanad si rasmi ah u bilaabin. Tani waxay ka hortagi doontaa in qofna uu xado furahaaga API sirta ah, sidoo kalena ay yareyn doonto khatarta mashruuca tarjumaadaada oo ay ku kordhaan xarfo cusub oo aan xidhiidh lahayn.

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 Pages 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!