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

Iyada oo adduunku sii caalamiyeesanayo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka imanaya dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha ugu muhiimsan ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad codsigaaga u habayso luqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

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

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

Tallaabada 1: Ku rakib maktabad i18n

Si aad uga hirgeliso caalamiyeynta codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabadood oo caan ah, oo ay ka mid yihiin next-intl. Si kastaba ha noqotee, tusaalahan waxaan isticmaali doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xargahaaga (strings) luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreeyaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno adigoo adeegsanaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda markii aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xidhiidha. Halkan ka abuur akoon. Waa bilaash, mana ku weydiisaneyso inaad ku darto kaarka deynta.

Gudaha is-dhexgalka isticmaale ee TacoTranslate, abuuro mashruuc oo u gudub tab-ka furayaasha API-ga. Abuur hal furaha read, iyo hal furaha read/write. Waxaan ku keydin doonaa iyaga sida doorsoomayaasha deegaanka. Furaha read waa waxa aan ugu yeerno 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 shaacin furaha sirta ah read/write ee API-ga ee ku jira deegaannada wax-soo-saarka dhinaca macmiilka.

Sidoo kale, waxaan ku dari doonaa laba doorsoome oo deegaanka ah oo dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka deegaanka ee caadiga ah ee dib loogu noqdo. Tusaalahan, waxaan u dejin doonaa en luqadda Ingiriisiga.
• TACOTRANSLATE_ORIGIN: “folder”-ka meesha erayadaada lagu kaydin doono, sida URL-ka boggaaga. Akhri wax dheeraad ah 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 macmiil adigoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuro fayl la yiraahdo /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 goor dhow.

Abuurista macmiilka fayl gooni ah waxay ka dhigaysaa mid sahlan in mar dambe dib loo isticmaalo. getLocales waa kaliya hawl kaaliye oo leh maarayn qaladaad oo horay loogu daray. Hadda, abuuro fayl loogu magac daray /app/[locale]/tacotranslate.tsx, halkaas oo aan ka 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'; taasoo muujinaysa in tani ay tahay qayb dhinaca macaamiisha.

Markii bixiyaha macnaha hadda diyaar yahay, abuuro fayl lagu magacaabo /app/[locale]/layout.tsx, kaasoo ah layout-ka xididka ee codsigeenna. Ogow in jidkan uu leeyahay gal (folder) ka faa’iideysanaya Dynamic Routes, halkaasoo [locale] uu yahay xuduud firfircoon (dynamic parameter).

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 lagu xusi karo halkan waa inaanu isticmaaleyno beddelka Dynamic Route ee [locale] si aan u soo qaadanno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams waxay hubinaysaa in dhammaan koodhadhka luqadaha ee aad mashruucaaga u hawlgelisay si horay loo sii soo saaro.

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, kaas oo u sheegaya Next.js inuu bogga dib u dhiso 60 ilbiriqsi ka dib, iyo inuu tarjumaadahaaga 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 aad u dejiso soo-saarida dhinaca server-ka, 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 beddel hubinta isProduction si ay ugu habboonaato dejintaada. Haddii true, TacoTranslate waxay muujin doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaan maxalli ah, tijaabo, ama staging (isProduction is false), waxaan isticmaali doonaa furaha sirta ah ee API-ga read/write si loo hubiyo in erayo cusub loo diro turjumaadda.

Si loo hubiyo in hagitaanka waddooyinka iyo dib‑u‑jiheyntu ay u shaqeeyaan sidii la filayay, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Anagoo adeegsanayna Middleware, waxaan isticmaaleyaasha u jiheyn karnaa bogag lagu soo bandhigay luqaddooda la doorbiday.

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 Middleware ee Next.js.

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

Tallaabada 5: Daabac oo tijaabi!

Waan dhamaynay! Codsigaaga React hadda si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xargaha qoraalka ee qaybta Translate. Ogow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xargaha cusub ee la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah (staging) halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, kuna daraya xargaha cusub ka hor inta aadan si rasmi ah u sii deyn. Tani waxay ka ilaalin doontaa in qofna uu xado furahaaga qarsoon ee API-ga, sidoo kalena yareyn doontaa suurtagalnimada in mashruucaaga turjumaadda uu buuxsamo iyadoo lagu darayo xargaha cusub ee 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!