Sida loo hirgeliyo caalamiyeynta codsi Next.js ah oo 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 isticmaaleyso Pages Router, eeg hagahan halkii.

Tallaabada 1: Ku rakib maktabad i18n

Si aan u hirgelinno 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 waxaanu isticmaali doonaa TacoTranslate.

TacoTranslate waxay si otomaatig ah u turjumaysaa xadhkahaaga luqad kasta iyadoo adeegsanaysa AI casri ah, waxayna kaa xoreysaa maaraynta daal badan ee faylasha JSON.

Aan ku rakibno adigoo isticmaalaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoonti TacoTranslate oo bilaash ah

Hadda markii aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API ee la xiriira. Halkan iska diiwaan geli. Waa bilaash, mana u baahna inaad geliso 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.

Waxaan sidoo kale ku dari doonaa laba kale oo doorsoomayaasha deegaanka 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 dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo isticmaalaya 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 dhawaan.

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 tilmaameysa in tani ay tahay qayb macmiil ah.

Hadda markii bixiyaha macnaha diyaar yahay, abuuro feyl magaciisu yahay /app/[locale]/layout.tsx, oo ah qaab-dhismeedka aasaasiga ah ee codsigayaga. Ogow in jidkan uu leeyahay gal isticmaalaya Dynamic Routes, halkaas oo [locale] yahay cabbir is-beddel ah.

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 beddelkayaga Dynamic Route [locale] si aan u soo qaadno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams waxay hubinaysaa in dhammaan koodhadhka luqadaha ee aad u dhaqaajisay mashruucaaga si hore loo soo abuuray.

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 inuu bogga dib u dhiso 60 ilbiriqsi ka dib, iyo inuu tarjumaadahaaga cusbooneysiiyo.

Tallaabada 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate wuxuu taageeraa soo-saarista dhinaca server-ka. Tani si weyn ayay u hagaajinaysaa waayo-aragnimada isticmaalaha iyadoo si dhakhso ah u muujinaysa nuxurka la turjumay, halkii marka hore laga arki lahaa muuqaal kooban oo nuxur aan la turjumin ah. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda dhinaca macmiilka, sababtoo ah hore ayaan u haysannaa turjumaadaha aan ugu baahan nahay bogga uu isticmaaluhu fiirinayo.

Si loo dejiyo 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 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 xaqiijiyo in routing-ka iyo dib-u-jiheyntu ay u shaqeeyaan sidii la rabay, waxaan u baahan doonaa inaan abuurno fayl lagu magacaabo /middleware.ts. Anagoo kaashanayna Middleware, waxaan u jiheyn karnaa isticmaaleyaasha bogagga 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.

Dhinaca macmiilka, waxaad wax ka beddeli kartaa cookie-ga locale si aad u bedesho luqadda uu isticmaalahu doorbidayo. Fadlan eeg koodhka tusaalaha oo dhameystiran si aad fikrado uga hesho sida tan loo sameeyo!

Tallaabada 5: Ku-deploy oo tijaabi!

Waan dhamaynay! Codsigaaga React hadda si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xadhigyo qoraal qaybta Translate. Ogsoonow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xadhigyo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah si aad ugu tijaabiso codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, kuna daraya xadhigyo cusub ka hor inta aadan hawlgelin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga qarsoon ee API-ga, isla markaana ay ka hortagi karto in mashruucaaga turjumaadda uu buuxsamo adigoo ku daraya xadhigyo cusub oo aan la xiriirin.

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!