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

Marka dunidu sii caalami noqoto, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala yimid dalal iyo dhaqamo kala duwan. Mid ka mid ah siyaabaha ugu muhiimsan ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habeyso codsigaaga luqado kala duwan, lacagaha, iyo qaababka taariikhda.

Maqaalkan, waxaanu sahmin 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 ah

Si aad u hirgeliso caalamiyeynta codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabad caan ah, oo ay ku jiraan next-intl. Si kastaba ha ahaatee tusaalahan, waxaan isticmaali doonaa TacoTranslate.

TacoTranslate si toos ah ayuu u turjumaa xadhigyadaada luqad kasta isagoo adeegsanaya AI horumarsan, wuxuuna kaa xoreeyaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno annagoo isticmaalayna npm terminalkaaga:

npm install tacotranslate

Tallaabada 2: Abuur xisaab TacoTranslate oo bilaash ah

Hadda oo module-ka la rakibay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc tarjumaad, iyo furayaasha API ee la xiriira. Halkan iska diiwaangeli. Waa bilaash, mana lagaa rabo inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuur mashruuc, kuna gudub tab-ka furayaasha API-ga. Abuur hal read furaha, iyo hal read/write furaha. Waxaan ku kaydin doonaa sidii doorsoomayaasha deegaanka. Furaha read waa waxa aan ugu yeerno 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 furaha sirta ah read/write ee API-ga u daadin deegaannada 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 la isticmaalayo marka aan helin tarjumaad. Tusaalahan, waxaan u dejin doonaa en (Ingiriisi).
• TACOTRANSLATE_ORIGIN: “Galka” meesha xargahaaga 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 3aad: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuurto macmiil adigoo isticmaalaya furayaasha API-ga ee hore. Tusaale ahaan, abuur feyl 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;

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

Abuurista client-ka fayl gooni ah waxay ka dhigaysaa mid fudud in mar dambe dib loo isticmaalo. getLocales waa kaliya hawl-adeeg (utility function) oo leh maarayn qaladaad oo dhisan. Hadda, samee fayl magaciisu yahay /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 dhinaca macmiilka ah.

Hadda oo bixiyaha macnaha diyaar yahay, abuuro fayl lagu magacaabo /app/[locale]/layout.tsx, kaasoo ah qaab-dhismeedka xididka ee codsigeenna. Ogow in waddadan ay leedahay gal isticmaalaya Dynamic Routes, halka [locale] uu yahay beddelka 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>
	);
}

Waxa ugu horreeya ee halkan mudan in la xuso waa inaan isticmaaleynaa parameter-keena Dynamic Route [locale] si aan u soo qaadno turjumaadaha luqaddaas. Intaa waxaa dheer, generateStaticParams waxay hubinaysaa in dhammaan koodhadhka locale ee aad mashruucaaga u hawlgelisay 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 kaas oo u sheegaya Next.js inuu bogga dib u dhiso 60 ilbiriqsi kadib, isla markaana uu turjumaadahaaga ka dhigo kuwo la cusbooneysiiyay.

Tallaabada 4: Hirgelinta soo-saarista dhinaca server-ka

TacoTranslate waxay taageertaa soo-saaridda dhinaca server-ka. Tani si weyn ayay u hagaajinaysaa khibradda isticmaalaha iyadoo isla markiiba la soo bandhigayo waxyaabaha la turjumay, halkii marka hore uu ka jiri lahaa muuqaal kooban oo aan la turjubin. Intaas waxaa sii dheer, waxaan ka fogaan karnaa codsiyada shabakadda ee dhinaca macmiilka, maxaa yeelay hore ayaan u haynaa tarjumaadaha aan u baahanahay ee bogga uu isticmaalahu daawanayo.

Si aad u dejiso soo-saarista 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};
};

Habee hubinta isProduction si ay ugu habboonaato dejintaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama staging (isProduction is false), waxaanu isticmaali doonaa furaha API-ga qarsoon read/write si loo hubiyo in xadhigyo cusub loo diro turjumaadda.

Si loo hubiyo in hagidda iyo dib-u-jiheyntu ay u shaqeynayaan sida la filayo, waxaan u baahan doonaa inaan abuurno fayl la yiraahdo /middleware.ts. Adigoo adeegsanaya Middleware, waxaan u jiheyn karnaa isticmaalayaasha 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 Next.js Middleware.

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

Tallaabada 5: Hirgeli oo tijaabi!

Waan dhamaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xadhig kasta qaybta Translate. Ogow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API ay awoodi doonaan inay abuuraan xadhigyo cusub oo 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 adeegsanaya furaha API noocaas ah, kuna daraya xadhigyo cusub ka hor inta aadan hawlgelin. Tani waxay ka hortagi doontaa qof kasta qof kasta inuu xado furahaaga sirta ah ee API-ga, iyo sidoo kale suurtagalnimada in mashruucaaga turjumaadda uu buuxsamo iyadoo lagu darayo 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!