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

Maadaama dunidu sii noqoneyso mid caalami ah, waxay noqoneysaa mid sii muhiim u ah horumariyeyaasha webka inay dhisaan codsiyo dabooli kara isticmaaleyaasha ka kala socda dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaaro waa iyada oo loo marayo internationalization (i18n), kaas oo kuu oggolaanaya inaad codsigaaga u habeyso luqado, lacagaha, iyo qaabab taariikheed oo kala duwan.

Maqaalkan, waxaan ku sahmin doonaa sida loogu daro internationalization codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Halkaan 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 UI-ga barnaamijka TacoTranslate, samee mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuri hal furaha read iyo hal furaha read/write. Waxaan ku keydin doonaa sidii deegaanka deegaanka (environment variables). Furaha read waxa aan ugu yeernaa 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

Hubi inaadan waligaa sirta ah read/write API keyga u faafin deegaanada wax soo saarka ee dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee loo isticmaalo marka aan la helin tarjumaad. Tusaalahan, waxaan u dejin doonaa en Ingiriisi ahaan.
• TACOTRANSLATE_ORIGIN: “Folder”-ka meesha xarafkaaga lagu kaydin doono, sida URL-ka mareegtaada. Waxbadan ka akhri asal ahaan halkan.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhex geliso codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuro fayl magaciisu yahay /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_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.

Ku abuurista macmiilka fayl gooni ah waxay ka dhigeysaa mid fudud in dib loo isticmaalo. getLocales waa kaliya hawl qalab (utility) oo leh maarayn khaladaad oo dhisan. Hadda, abuuro fayl magaciisu yahay /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 kaasoo u sheegay Next.js inuu dib u dhiso bogga kadib 60 ilbiriqsi, isla markaana uu sii hayo turjumaadahaaga si casriyeysan.

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 beddel hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true tahay, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama kuwa horumarinta (isProduction is false), waxaanu isticmaali doonaa furaha qarsoodiga ah ee read/write si loo hubiyo in xarfo cusub loo diro tarjamada.

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