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

Maaddaama adduunku sii noqonayo mid caalami ah, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyayaasha webku dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala imanaya dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad codsigaaga la qabsato luqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

Maqaalkan, waxaanu sahamin doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo soo-saarka dhinaca server-ka. TL;DR: Eeg tusaalaha buuxa halkan.

Tilmaantan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya App Router.
Haddii aad isticmaalayso Pages Router, eeg tilmaantan beddelkeeda.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad uga dhaqan geliso caalamiyeynta codsigaaga 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 noqotee, tusaalahan, waxaan isticmaali doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xargahaaga luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreeyaa maaraynta daal badan ee faylasha JSON.

Aan ku rakibno iyadoo la adeegsanayo npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda oo aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API ee la xiriira. Halkan iska diiwaangeli. Waa bilaash, mana kuu baahna inaad geliso kaarka deynta.

Gudaha UI-ga TacoTranslate, samee mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Samee hal furaha read iyo hal furaha read/write. Waxaan ku keydin doonnaa sidii doorsoomayaal deegaanka. 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

Hubso inaadan waligaa u daadin furaha sirta ah ee API-ga read/write deegaanada wax-soo-saarka ee dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka caadiga ah ee luqadda gurmadka (fallback). Tusaalahan, waxaan u dejin doonaa en (Ingiriisi).
• TACOTRANSLATE_ORIGIN: “galka” meesha xadhkahaaga lagu kaydin doono, tusaale ahaan URL-ka boggaaga. Akhri 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 dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo isticmaalaya furayaasha API-ga ee hore. 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;

Si otomaatig ah ayaan dhawaan u qeexi doonaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE.

Abuurista client-ka fayl gooni ah waxay sahlaysaa in dib loo isticmaalo goor dambe. getLocales waa kaliya hawl-adeeg (utility function) oo leh maarayn khaladaad oo horay loo dhisay. Hadda, abuur fayl la yiraahdo /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'; taas oo muujinaysa in tani ay tahay qayb dhinaca macmiilka.

Markii bixiyaha macnaha (context provider) diyaar noqdo, samee fayl la yiraahdo /app/[locale]/layout.tsx, kaas oo ah layout-ka xididka ee codsigeenna. Ogow in waddadan ay leedahay gal adeegsada Dynamic Routes, halkaas oo [locale] uu yahay xuduud isbeddelaysa.

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 mudan in la xuso ayaa ah inaanu isticmaaleyno parameter-ka Dynamic Route [locale] si aan u soo qaadno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams waxay hubinaysaa in dhammaan koodhadhka locale ee aad u hawlgelisay mashruucaaga si horay ah loo soo saaray.

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 doorsoomaha revalidate ee u sheegaya Next.js inuu bogga dib u dhiso 60 ilbiriqsi kadib, iyo inuu turjumaadahaaga sii cusbooneysiiyo.

Tallaabada 4: Hirgelinta soo-bandhigida dhinaca server-ka

TacoTranslate waxay taageertaa soo-saarista dhinaca server-ka. Tani si weyn ayay u hagaajinaysaa khibradda isticmaale, waayo waxay isla markiiba muujinaysaa nuxurka la turjumay, halkii marka hore ay u bixin lahayd muuqaal kooban oo nuxur aan la turjumin. Intaa waxaa dheer, waxaan ka boodsan karnaa codsiyada shabakadda dhinaca macmiilka, sababtoo ah hore ayaan u haynaa turjumaadaha aan u baahanahay ee bogga uu isticmaaluhu daawanayo.

Si loo habeeyo soo-saarista dhinaca server-ka, 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 beddel hubinta isProduction si ay ugu habboonaato habayntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaan maxalli, tijaabo, ama staging (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 hagidda iyo dib-u-wareejintu u shaqeeyaan sida la filayo, waxaan u baahan doonaa inaan abuurno fayl magaciisu yahay /middleware.ts. Anagoo adeegsanayna Middleware, waxaan u leexin karnaa isticmaaleyaasha bogag lagu soo bandhigo 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 Dukumentiga Middleware ee Next.js.

Dhanka macmiilka, waxaad bedeli kartaa cookie-ga locale si aad u beddesho luqadda uu isticmaalahu doorbido. Fadlan eeg koodhka tusaalaha oo dhameystiran si aad u hesho fikrado ku saabsan sida tan loo sameeyo!

Tallaabada 5: Dajiso oo tijaabi!

Waan dhamaynay! Codsigaaga React hadda si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarigyo kasta qaybta Translate. Ogsoonow in kaliya deegaannada leh ogolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarigyo cusub oo lagu turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo amaan ah, halkaasoo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, adigoo ku daraya xarigyo cusub ka hor intaadan la sii deynin. Tani waxay ka hortagi doontaa in qof kasta qof kasta uu xado furahaaga qarsoon ee API-ga, iyo suurtogal ahaan in mashruucaaga turjumaadda lagu buuxiyo xarigyo cusub oo aan xiriir la 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!