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.

Hagahan waxaa loogu talagalay barnaamijyada Next.js ee isticmaalaya App Router.
Haddii aad isticmaaleyso Pages Router, eeg hagekan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si loo hirgeliyo caalamiyeynta (i18n) ee arjigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabado caan ah, oo ay ku jiraan next-intl. Si kastaba ha ahaatee, tusaalahan waxaan isticmaali doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayay u tarjumaysaa qoraaladaada luqad kasta iyadoo adeegsanaysa AI casri ah, waxayna kaa xoreynaysaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno adigoo isticmaalaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur koonto TacoTranslate oo bilaash ah

Hadda oo aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoon TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Halkan iska diiwaangeli. Waa bilaash, oo uma baahna inaad ku darto 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 deegaan oo dheeraad 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 macmiil adigoo adeegsanaya 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;

Waxaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY iyo TACOTRANSLATE_PROJECT_LOCALE dhawaan.

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'; taasoo muujinaysa in tani ay tahay qayb dhinaca macmiilka.

Marka bixiyaha macnaha (context provider) hadda diyaar yahay, abuuro feyl magaciisu yahay /app/[locale]/layout.tsx, kaas oo ah layout-ka xididka ee codsigeenna. Ogow in waddadan ay leedahay gal ka faa'iideysanaya Dynamic Routes, halkaasoo [locale] uu yahay xuduud 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>
	);
}

Arrinka ugu horreeya ee halkan mudan in la xuso waa inaanu isticmaaleynaa beddelka Dynamic Route ee [locale] si aan u soo helno turjumaadaha luqaddaas. Sidoo kale, 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 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-saaridda dhinaca server-ka. Tani si weyn ayay u hagaajinaysaa khibradda isticmaalaha iyadoo isla markiiba muujinaysa nuxurka la turjumay, halkii uu marka hore ka soo bixi lahaa muuqaal kooban oo nuxur aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macaamiisha, sababtoo ah hore ayaan u haynaa turjumaadaha aan u baahan nahay ee bogga uu isticmaaluhu daawanayo.

Si aad u dejiso soo bandhigida dhinaca server-ka, 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 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 hagida iyo dib-u-wareejintu ay u shaqeeyaan sidii la filayay, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Anagoo adeegsanayna Middleware, waxaan u leexin karnaa isticmaaleyaasha bogagga lagu soo bandhigay luqaddooda la doorbido.

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 beddeli kartaa cookie-ga locale si aad u bedesho luqadda uu isticmaalahu doorbido. Fadlan eeg koodhka tusaalaha oo dhameystiran si aad u hesho fikrado ku saabsan sida tan loo sameeyo!

Tallaabada 5aad: Hirgelin oo tijaabi!

Waan dhamaynay! Barnaamijkaaga React hadda si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarigyo kasta qaybta Translate. Fiiro gaar ah: kaliya deegaannada leh rukhsadda read/write ee furaha API-ga ayaa awoodi doona inay abuuraan xarigyo cusub oo la turjumi doono. Waxaan ku talinaynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah halkaas oo aad ku tijaabin karto barnaamijkaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, kuna daraya xarigyo cusub ka hor inta aan la gelin hawlgalka. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, isla markaana waxay ka hortagi doontaa in mashruucaaga tarjumaadda si aan loo baahnayn loogu 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!