Sida loo hirgeliyo caalamiyeynta (internationalization) ee codsiga Next.js oo adeegsanaya App Router

Maaddaama aduunka uu sii noqday mid caalami ah, waxa sii kordhaya muhiimada ay leedahay in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala socda dalal iyo dhaqamo kala duwan. Mid ka mid ah siyaabaha ugu waaweyn ee tan lagu gaari karo waa iyada oo loo marayo caalamiyeynta (i18n), taas oo kuu oggolaanaysa inaad ku habayso codsigaaga luqado kala duwan, lacago, iyo qaabab taariikheed kala duwan.

Maqaalkan, waxaan ku baari doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Halkan ka eeg tusaalaha oo dhan.

Tilmaantan waa loogu talagalay codsiyada Next.js ee isticmaala App Router.
Haddii aad isticmaalayso Pages Router, fadlan eeg tilmaantan beddelkeeda.

Talaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeynta (internationalization) codsigaaga 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 isticmaaleynaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xarafkaaga luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoraynayaa maaraynta daalacashada faylasha JSON.

Aan ku rakibno annagoo adeegsanayna npm gudaha terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda oo module-ka aad rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Halkan ka abuuro akoonta. Waa bilaash, sidoo kalena Uma baahna inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuri mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuri hal furaha read, iyo hal furaha read/write. Waxaan ku keydin doonaa sida doorsoomayaasha deegaanka (environment variables). 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

Hubi inaadan waligaa sirta ah ee read/write furaha API-ga u faafin deegaanada waxsoo saarka ee dhinaca macaamiisha.

Waxaan sidoo kale ku dari doonaa laba doorsoome jawi oo dheeri ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda caadiga ah ee dib loogu laabto. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriis.
• TACOTRANSLATE_ORIGIN: “Folder”-ka ay ku kaydsan doonaan xargahaaga, sida URL-ka boggaaga internetka. Halkan ka akhri wax dheeraad ah oo ku saabsan asalka.

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

Talaabada 3: Dejinta TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 toos ah u qeexi doonnaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE dhawaan.

Abuurista macaamiisha fayl gooni ah waxay ka dhigaysaa mid fudud in dib loo isticmaalo markale. getLocales waa kaliya hawl-caawineed leh qaar ka mid ah maaraynta qaladaadka dhisann. Hadda, abuuri fayl magaciisu yahay /app/[locale]/tacotranslate.tsx, meeshaas oo aan ku hirgelin doonno 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>
	);
}

Fiiro gaar ah u yeelo 'use client'; taasoo muujineysa in tani ay tahay qayb ka mid ah macaamilka.

Iyada oo bixiyaha mawjadda guud ee hadda diyaar u ah inuu tago, abuuro file ah oo la magacaabay /app/[locale]/layout.tsx, qaabka xididka in our codsiga. Ogsoonow in wadadani leedahay folder ah oo Dynamic Routesisticmaalka , halkaas oo [locale] yahay unugga 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 xuso waa inaanu isticmaaleyno cabirka Dynamic Route ee [locale] si aan u soo qaadanno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams waxay hubineysaa in dhammaan koodhadhka luqadaha ee aad u hawlgelisay mashruucaaga la sii diyaarshay.

Hadda, aan dhisno boggeena ugu horreeya! Abuur 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 inuu dib u dhiso bogga ka dib 60 ilbiriqsi, islamarkaana uu joogteeyo turjumaadahaaga si casri ah.

Tallaabada 4: Hirgelinta server-ka dhinaca rendering-ka

TacoTranslate wuxuu taageeraa server side rendering. Tani si weyn ayay u hagaajisaa waayo-aragnimada isticmaalaha iyadoo si degdeg ah loo soo bandhigayo nuxurka la turjumay, halkii ugu horreyn laga arki lahaa nuxur aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah hore ayaan u haynaa turjumaadaha aan u baahanahay bogga uu isticmaaluhu daawanayo.

Si aad u dejiso server side rendering, samee 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 jeeg isProduction si aad ugu habboonaato qaabkaaga. Haddii true, TacoTranslate waxay dusha ka saari doontaa muhiimka ah API dadweynaha. Hadaynu ku jirno goob maxali ah, tijaabo, ama jawi goob-socodka (isProduction is false), waxaanu isticmaali doonaa furaha sirta read/write API si loo hubiyo in xadhig cusub loo diro si loo turjumo.

Si loo hubiyo in waddada iyo dib u jihayntu u shaqeeyaan sidii la filayay, waxaan u baahan doonaa inaan abuurno file magaciisu yahay /middleware.ts. Anagoo adeegsanayna Middleware, waxaan u jihayn karnaa isticmaaleyaasha bogag lagu soo bandhigay luqadda ay doorbidaan.

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 bedeli kartaa cookies-ka locale si aad u bedesho luqadda uu isticmaalahu doorbido. Fadlan eeg koodhka tusaalaha dhammeystiran si aad u hesho fikrado ku saabsan sida tan loo sameeyo!

Tallaabada 5: Daabac oo tijaabi!

Waxaan dhamaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo cusub oo ku jira qaybta Translate. Ogeysiis in kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumayo. Waxaan kugula talineynaa inaad leedahay deegaan tijaabo xiran oo ammaan ah halkaas oo aad ku tijaabin karto codsigaaga wax soo saarka adigoo wata furaha API-ga noocaas ah, adigoo ku daraya xarfo cusub ka hor intaadan gelin hawlgalka tooska ah. Tani waxay ka hortagi doontaa in qofna uu xado furahaaga sirta ah ee API-ga, isla markaana aan mashruucaaga turjumaadda lagu buuxin xarfo cusub oo aan xiriir la lahayn.

Hubi inaad fiiriso tusaalaha dhammeystiran ee ku yaal profile-keena GitHub. Halkaas, sidoo kale waxaad ka heli doontaa tusaale ku saabsan sida tan loo sameeyo adigoo adeegsanaya Pages Router ! Haddii aad la kulanto wax dhibaato ah, si xor ah u naga soo xiriir, waxaana si weyn ugu farxi doonnaa inaan kaa caawino.

TacoTranslate waxay kuu oggolaaneysaa inaad si toos ah u turjunto codsiyadaada React si degdeg ah loona kala turjun karo luqad kasta. Biloow maanta!