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

Maaddaama adduunku sii ballaaranayo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka socda dalal iyo dhaqammo kala duwan. Mid ka mid ah hababka muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad codsigaaga waafajiso luuqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

Maqaalkan, waxaan ku baari doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Fiiri tusaalaha buuxa halkan.

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya App Router.
Haddii aad isticmaalayso Pages Router, fiiri hagahan beddelkeeda.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeenta (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 u isticmaali doonnaa TacoTranslate.

TacoTranslate si toos ah ayuu u turjumaa xarafkaaga luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreeyaa maaraynta daalacan ee faylashada JSON.

Aan ku rakibno adigoo adeegsanaya npm terminalkaaga:

npm install tacotranslate

Tallaabada 2: Abuur 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 abuur akoon. Waa bilaash, waxaana aadan u baahnayn inaad ku darto kaarka deynta.

Gudaha UI-ga barnaamijka TacoTranslate, abuur mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuro hal furaha read, iyo hal furaha read/write. Waxaan ku keydin doonnaa iyaga sidii doorsoomayaal deegaanka ah. Furaha read waa waxa aan u naqaan 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 API key-ga ka daadixin deegaanada wax soo saarka dhinaca macaamiisha.

Waxaan sidoo kale ku dari doonaa laba beddel deegaanka dheeri ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ee la soo celinayo. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: “Faylka” meesha qoraalladaadu lagu keydin doono, sida URL-ka boggaaga. Akhriso wax badan oo ku saabsan asalka 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 horey loo sameeyay. Tusaale ahaan, abuuro fayl magaca /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;

Waxaa si otomaatig ah loo qeexi doonaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE dhowaan.

Abuurista macmiilka fayl gooni ah ayaa ka dhigaysa mid sahlan in dib loo isticmaalo mar kale. getLocales waa kaliya hawl-fududeyn leh oo leh maarayn khaladaad oo horay loo dhisay. Hadda, abuuro fayl magaciisu yahay /app/[locale]/tacotranslate.tsx, halkaas 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>
	);
}

Ogow 'use client'; oo muujinaya in tani 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>
	);
}

Shayga ugu horreeya ee halkan lagu xuso waa inaanu isticmaaleyno xuduudaheena Dynamic Route ee ah [locale] si aan u soo qaadanno turjumaadaha luqaddaas. Intaas waxaa dheer, generateStaticParams ayaa hubinaya in dhammaan koodhadhka luqadaha ee aad u dhaqaajisay mashruucaaga ay horay loo soo diyaariyay.

Hadda, aan dhisno boggeena ugu horreeya! Abuuri feyl magaciisu yahay /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 kala-guurka revalidate kaas oo u sheegaya Next.js inuu mar kale dhiso bogga ka dib 60 ilbiriqsi, islamarkaana uu la socdo turjumaadahaaga si joogto ah.

Tallaabada 4: Hirgelinta soo bandhigidda dhinaca server-ka

TacoTranslate waxay taageertaa server side rendering. Tani si weyn ayay u hagaajinaysaa waayo-aragnimada isticmaalaha iyadoo muujinaysa nuxurka la turjumay isla markiiba, halkii ay ka muujin lahayd iftiin kooban oo nuxur aan la turjumin ah marka hore. Intaas waxaa sii dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan horey u haynaa turjumaadaha aan u baahanahay bogga uu isticmaaluhu 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 hubiyo in habaynta waddooyinka iyo dib-u-celinta ay u shaqeeyaan sida la filayo, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Anagoo adeegsanayna Middleware, waxaan u wareejin karnaa isticmaaleyaasha bogagga ku soo bandhigaya 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 sida ku xusan dukumentiga Next.js Middleware.

Dhanka macmiilka, waxaad bedeli kartaa kukiga locale si aad u badasho luqadda uu isticmaalehu doorbido. Fadlan eeg tusaalaha koodhka dhamaystiran si aad u hesho fikrado ku saabsan sida taas loo sameeyo!

Talaabada 5: Dhaqan geli oo tijaabi!

Waan dhamaynay! Hadda codsigaaga React waxaa si otomaatig ah loo turjumi doonaa markaad wax xarfo ah ku darto qaybta Translate. Ogow in kaliya deegaanada leh rukhsadda read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato deegaan xirnaan leh oo ammaan ah oo horumarin ah halkaas oo aad ku tijaabin karto codsigaaga wax soo saarka adigoo adeegsanaya furaha API-ga noocaas ah, iyadoo la ku darayo xarfo cusub ka hor inta aan la sii deyn. Tani waxay ka hortagi doontaa cid kasta oo xado furahaaga API-ga qarsoon, isla markaana waxay ka ilaalin doontaa mashruucaaga turjumaadda inuu buuxsamo xarfo cusub oo aan la xiriirin.

Hubi inaad fiiriso tusaalaha dhameystiran ee ku jira profile-keena GitHub. Halkaas, sidoo kale waxaad ka heli doontaa tusaale sida loo sameeyo tan iyadoo la adeegsanayo Pages Router! Haddii aad wax dhibaato ah la kulanto, si xor ah u nala soo xiriir, waanan ku farxi doonnaa inaan kaa caawino.

TacoTranslate wuxuu kuu oggolaanayaa inaad si otomaatig ah u turjunto codsiyadaada React si degdeg ah oo ka turjumi karta luqad kasta. Bilow maanta!