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

Maadaama adduunku sii noqonayo mid caalami ah, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyeyaasha webka ay dhisaan barnaamijyo u adeegaya isticmaaleyaal ka kala socda dalal iyo dhaqamo kala duwan. Mid ka mid ah siyaabaha ugu muhiimsan ee tan lagu gaaro waa iyada oo loo marayo caalamiyeynta (i18n), taas oo kuu oggolaaneysa inaad u habeyso barnaamijkaaga luqado, lacago, iyo qaabab taariikheed kala duwan.

Maqaalkan, waxaan ka baari doonnaa sida loo daro caalamiyeynta barnaamijkaaga React Next.js, adigoo adeegsanaya server side rendering. TL;DR: Eeg tusaalaha buuxa halkan.

Hagahan wuxuu ku saabsan yahay codsiyada Next.js ee isticmaalaya App Router.
Haddii aad isticmaalayso Pages Router, fadlan eeg hagekan beddelkeeda.

Talaabada 1: Ku rakib maktabad i18n ah

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

TacoTranslate waxay si otomaatig ah u tarjumaysaa xarafyadaada luqad kasta iyadoo adeegsanaysa AI casri ah, waxayna kaa xoreysaa maaraynta daalashada leh ee faylasha JSON.

Aynu ku rakibno adoo adeegsanaya npm terminalkaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon bilaash ah oo TacoTranslate ah

Hadda oo aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaan, 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 TacoTranslate ee codsiga, samee mashruuc, kadibna u gudub tabka furayaasha API-ga. Samee 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 asalka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubi inaadan marnaba sharraxaadda qarsoodiga ah ee read/write API key-ka u faafin deegaanka macaamiisha ee soosaarka.

Waxaan sidoo kale ku dari doonaa laba beddelaha deegaanka oo dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda aasaasiga ah ee lagu laabto haddii mid kale la waayo. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: "Folder"-ka ay erayadaadu ku kaydsan doonaan, tusaale ahaan URL-ka boggaaga internetka. Waxbadan ka akhri asalsocodka halkan.

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 adigoo adeegsanaya furayaasha API ee hore loo soo siiyey. Tusaale ahaan, abuur 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 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>
	);
}

Fiiro gaar ah u yeelo 'use client'; taasoo muujinaysa in tani ay tahay qaybta macmiilka.

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 waxaa weeye inaan isticmaaleyno tilmaamahayaga Dynamic Route oo ah [locale] si aan u soo qaadano turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams ayaa hubinaya in dhammaan koodhadhka luqadaha ee aad hawlgelisay mashruucaaga si horay loo diyaariyey loo soo bandhigo.

Hadda, aan dhisno boggeena ugu horreeya! Abuur fayl 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 isbeddelka revalidate oo u sheegaya Next.js inuu dib u dhiso bogga ka dib 60 ilbidhiqsi, isla markaana uu sii hayo tarjumaadahaaga kuwa casriyeysan.

Talaabada 4: Hirgelinta server-ka dhinaca rendering

TacoTranslate waxay taageertaa server side rendering. Tani si weyn ayay u wanaajisaa waayo-aragnimada isticmaalaha iyadoo si degdeg ah u muujinaysa macluumaadka turjuman, halkii ay ka muujin lahayd macluumaad aan turjumanayn bilowgii. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macaamiisha, sababtoo ah waxaan horey u haynaa turjumaadaha aan u baahan nahay ee 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 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 routing iyo dib-u-wareejintu ay u shaqeyso sidii la filayay, waxaan u baahan doonaa inaan abuurno fayl magaciisu yahay /middleware.ts. Anagoo adeegsanayna Middleware, waxaanu u wareejin karnaa isticmaalayaasha bogagga lagu soo bandhigay luqadda ay jecel yihiin.

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 bedeli kartaa kekiga locale si aad u badasho luqadda uu isticmaale doorbido. Fadlan eeg koodhka tusaalaha oo dhameystiran fikradaha ku saabsan sida tan loo sameeyo!

Tallaabada 5: Daabac oo tijaabi!

Waan dhamaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumayaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Fiiro gaar ah u yeelo in kaliya deegaanada leh oggolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato deegaan xirnaan iyo mid amaan ah oo lagu tijaabiyo codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, iyadoo la kordhinayo xarfo cusub ka hor inta aan la sii deyn. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, isla markaana laga hortago inuu mashruucaaga turjumaadda ku kordhiyo xarfo cusub oo aan xiriir la lahayn.

Hubi inaad fiiriso tusaalaha dhamaystiran ee ku yaal astaanta GitHub-keena. Halkaas, waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo iyadoo la isticmaalayo Pages Router! Haddii aad la kulanto dhibaatooyin, xor ayaad u tahay inaad nala soo xiriirto, waanan ku farxi doonaa inaan ku caawinno.

TacoTranslate waxay kuu oggolaaneysaa inaad si otomaatig ah u turjunto codsiyada React-kaaga si dhakhso ah una turjunto luqad kasta. Bilow maanta!