Sida loo hirgeliyo caalamiyeynta codsi Next.js ah kaasoo adeegsanaya App Router

Marka dunidu sii caalami noqoto, waxa ay sii kordhisaa muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala yimaada dalal iyo dhaqammo kala duwan. Mid ka mid ah dariiqooyinka muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taas oo kuu oggolaanaysa inaad u habeyso codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Maqaalkan, waxaanu ka baari doonaa sida caalamiyeynta loogu daro codsigaaga React Next.js, iyadoo la adeegsanayo soo-saaridda 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 u hirgeliso caalamiyeynta (internationalization) ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jiraan next-intl. Tusaalahan, si kastaba ha noqotee, waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa qoraaladaada luqad kasta isagoo adeegsanaya sirdoon macmal oo horumarsan, wuxuuna ka xoreeyaa maareynta daalaysa ee faylasha JSON.

Aan ku rakibno adoo isticmaalaya 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 tarjumaad, iyo furayaasha API-ga ee la xiriira. Halkan ka samee akoon. Waa bilaash, mana kaaga baahna inaad ku darto kaarka deynta.

Gudaha UI-ga codsiga TacoTranslate, abuur mashruuc, ka dibna u gudub tab-ka furayaasha API-ga. Abuur hal read furaha iyo hal read/write furaha. Waxaan ku kaydin doonaa 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 deegaannada wax-soo-saarka dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda default ee loo isticmaalo marka la waayo tarjumaad kale (fallback). Tusaalahan, waxaan u dejin doonaa en oo loogu talagalay Ingiriisi.
• TACOTRANSLATE_ORIGIN: “galka” meesha xarigyadaada lagu kaydin doono, sida URL-ka boggaaga. Wax dheeraad ah ka akhri 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 adeegsanaya furayaasha API-ga ee 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 otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE dhowaan.

Abuurista macmiilka feyl gooni ah waxay ka dhigaysa mid sahlan in dib loo isticmaalo mustaqbalka. getLocales waa kaliya hawl-adeeg (utility function) leh maarayn qaladaad oo horay loo dhisay. Hadda, abuur feyl la yiraahdo /app/[locale]/tacotranslate.tsx, halkaasoo 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'; taasoo muujinaysa in tani ay tahay qayb macmiil.

Iyadoo bixiyaha macnaha hadda diyaar yahay, abuur fayl magaciisu yahay /app/[locale]/layout.tsx, kaas oo ah layout-ka xididka ee codsigeenna. Ogow in dariiqan uu leeyahay gal isticmaala Dynamic Routes, halkaasoo [locale] uu yahay parameter is-beddelaya.

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 waa inaanu isticmaaleyno halbeegga Dynamic Route ee [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 diyaariyey.

Hadda, aan dhisno boggeena ugu horreeya! Abuur feyl 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 in uu bogga dib u dhiso 60 ilbiriqsi ka dib, isla markaana uu turjumaadahaaga ku hayo kuwii ugu dambeeyay.

Tallaabada 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate waxay taageertaa soo-saarista dhinaca server-ka. Tani si weyn ayay u horumarisaa khibradda isticmaalaha, iyadoo waxyaabaha la turjumay isla markiiba lagu soo bandhigayo, halkii marka hore la arki lahaa muuqaal gaaban oo wax aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca client-ka, maxaa yeelay horey ayaan u haysanaa turjumaadaha aan u baahanahay ee bogga uu isticmaalahu daawanayo.

Si aad u dejiso soo saarista 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 bedel hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno jawi maxalli ah, tijaabo, ama horudhac (isProduction is false), waxaanu adeegsan doonaa furaha API-ga qarsoon read/write si loo hubiyo in xarigyada qoraalka cusub loo diro turjumaad.

Si loo hubiyo in routing iyo redirection ay u shaqeeyaan sida la filayo, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Iyada oo la adeegsanayo Middleware, waxaan u leexin karnaa isticmaaleyaasha bogagga 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 u dejiso matcher si waafaqsan dukumentiga Next.js Middleware.

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

Tallaabada 5: Ku daabac oo tijaabi!

Waan dhammaynay! Codsigaaga React hadda si otomaatig ah ayaa loo turjumayaa markaad ku darto xadhig kasta qaybta Translate. Fiiro gaar ah: kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ayaa awood u yeelan doona inay abuuraan xadhigyo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo amaan ah halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, adigoo ku daraya xadhigyo cusub ka hor intaadan si rasmi ah u hawlgelin. Tani waxay ka hortagi doontaa in qofna uu xado furahaaga sirta ah ee API-ga, iyo suurtogal ahaan inay buuxiso mashruucaaga turjumaadda adigoo ku daraya xadhigyo 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!