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

Iyadoo adduunku sii noqdo mid caalami ah, waxay noqoneysaa mid sii muhiim u ah horumariyeyaasha webka inay dhisaan codsiyo dabooli kara baahiyaha isticmaaleyaasha ka kala socda dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyada oo la adeegsanayo internationalization (i18n), taasoo kuu oggolaaneysa inaad u habeyso codsigaaga luuqado kala duwan, lacagaha, iyo qaababka taariikhda.

Maqaalkan, waxaan ku sahamindoonaa sida loo daro internationalization codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Eeg tusaalaha buuxa halkan.

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

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad ugu dhaqangeliso caalaminimada (internationalization) codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n ah. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jirto next-intl. Si kastaba ha ahaatee, tusaalahan, waxaan isticmaali doonnaa TacoTranslate.

TacoTranslate si toos ah ayuu uga tarjumaa xarafkaaga luqad kasta oo aduunka ah isagoo adeegsanaya AI casri ah, sidoo kalena wuxuu kaa xoreeyaa maareynta daalan ee faylalka JSON.

Aan ku rakibno adigoo adeegsanaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Samee akoonti TacoTranslate oo bilaash ah

Hadda oo aad rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuca turjumaadda, iyo furayaasha API ee la xiriira. Halkan ka samee akoon. Waa bilaash, waxaana aanay u baahnayn inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuro mashruuc, kadibna u gudub qaybta furayaasha API-ga. Abuuro hal furaha read ah, iyo hal furaha read/write ah. Waxaan ku keydin doonnaa sidii isbeddelada deegaanka. Furaha read waxa aanu ugu yeernaa public halka furaha read/write uu yahay secret. Tusaale ahaan, waad 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 API key-ga u daadihin deegaanka wax soo saarka ee dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa laba doorsoome deegaan dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee degdega ah. Tusaalahan, waxaan u dejin doonaa en Ingiriisi.
• TACOTRANSLATE_ORIGIN: "Gal" meesha xarfooyinkaaga lagu keydin doono, sida URL-ka boggaaga internetka. Wax dheeraad ah ka akhri asalka halkan.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad ugu dhex darto TacoTranslate codsigaaga, waxaad u baahan doontaa inaad abuurto macaamiil adoo adeegsanaya furayaasha API-ga 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 toos ah u qeexi doonaa 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>
	);
}

Fiiro gaar ah u yeelo 'use client'; oo muujinaya in tani ay tahay qayb ka mid ah macmiilka.

Iyada oo bixiyaha macnaha hadda diyaar yahay, samee fayl magaciisu yahay /app/[locale]/layout.tsx, oo ah qaab-dhismeedka aasaasiga ah ee codsigeenna. Ogeysiis in waddadan ay leedahay gal isticmaala Dynamic Routes, halkaasoo [locale] uu yahay cabbir 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 laga xuso waa inaanu isticmaaleyno xuduudaheena Dynamic Route ee [locale] si aan u helno tarjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams ayaa hubinaya in dhammaan koodhadhka luqadaha ee aad hawlgelisay mashruucaaga si horay loo diyaariyey.

Hadda, aan dhisno boggayaga ugu horreeya! Abuur fayl loogu magac daray /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 sheega Next.js inuu mar kale dib u dhiso bogga kadib 60 ilbiriqsi, isla markaana uu hayn doono tarjumaadahaaga kuwo casri ah.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate wuxuu taageeraa server side rendering. Tani waxay si weyn u hagaajinaysaa khibradda isticmaale iyada oo muujinaysa macluumaad turjuman isla markiiba, halkii ay ka ahaan lahayd iftiin degdeg ah oo macluumaad aan la turjumin ah. Intaas waxaa sii dheer, waxaan ka boodi karnaa codsiyada shabakadda ee client-ka, sababtoo ah waxaan horey u haynaa turjumaadaha aan uga baahan nahay bogga uu isticmaalehu daawanayo.

Si aad u dejiso server side rendering, abuuro 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 hubiyo in marinta iyo dib-u-celintu ay u shaqeeyaan sidii la filayey, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Isticmaalka Middleware, waxaan ku celin karnaa isticmaalayaasha bogagga 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 in aad dejiso matcher iyadoo la raacayo dukumentiga Next.js Middleware.

Dhanka macaamilka, waxaad beddeli kartaa cookie-ga locale si aad u badasho luqadda uu isticmaalehu doorbido. Fadlan eeg koodhka tusaalaha dhammeystiran si aad u hesho fikrado ku saabsan sida tan loo sameeyo!

Tallaabada 5: Dhaqan geli oo tijaabi!

Waan dhammaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Fiiro gaar ah u yeelo in kaliya deegaanka leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato deegaan xirxiran oo ammaan ah oo lagu tijaabiyo codsigaaga wax soo saarka iyadoo la adeegsanayo furaha API-ga noocaas ah, iyadoo lagu darayo xarfo cusub ka hor inta aan la daahfurnaan. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga qarsoodiga ah ee API-ga, iyo sidoo kale in mashruucaaga turjumaadda uu ku bato xarfo cusub oo aan xiriir 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!