Sida loo hirgeliyo caalamiyeynta (i18n) ee codsi Next.js ah oo isticmaalaya Pages Router

Marka adduunku sii caalamiyeysto, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaal ka kala yimaada dalal iyo dhaqanno kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa caalamiyeeynta (i18n), taasoo kuu oggolaaneysa inaad codsigaaga u waafajiso luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Casharkan, waxaanu sahamayn doonaa sida loo daro caalamiyeeynta 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 Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagahan beddelkeeda.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad ugu dhaqangeliso caalamiyeynta (i18n) codsigaaga 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, tusaalahaan, waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u tarjumaa xargahaaga luqad kasta isagoo adeegsanaya sirdoonka macmalka ah ee casriga ah, wuxuuna kaa xoreeyaa maaraynta daalaysa ee faylasha JSON.

Aan ku rakibno adoo 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 tarjumaad, iyo furayaal API oo la xiriira. Halkan iska diiwaangeli. Waa bilaash, oo laguma weydiiyo inaad kaarka deynta geliso.

Gudaha UI-ga TacoTranslate, abuuro mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuur hal read furaha, iyo hal read/write furaha. Waxaan ku keydin 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

Hubi inaadan waligaa furaha sirta ah read/write ee API-da ka daadin deegaanada wax-soo-saarka ee dhinaca macmiilka.

Sidoo kale, waxaan ku dari doonaa laba doorsoome deegaan: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka degaanka caadiga ah ee loogu noqdo (fallback). Tusaalahan, waxaan u dejin doonaa en (Af Ingiriisi).
• TACOTRANSLATE_ORIGIN: “galka” meesha qoraaladaada lagu kaydin doono, sida URL-ka boggaaga. Akhriso 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 darto codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo adeegsanaya furayaasha API-ga ee horay loo abuuray. Tusaale ahaan, abuur feyl lagu magacaabo /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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Waxaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY goor dhow.

Ku abuurista client fayl gooni ah waxay ka dhigeysaa in si fudud dib loogu isticmaali karo mar dambe. Hadda, annagoo isticmaalayna /pages/_app.tsx loo habeeyey, waxaan ku dari doonnaa bixiyaha TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Haddii aad horey u leedahay pageProps iyo _app.tsx, fadlan kordhi qeexidda adigoo ku daraya guryaha iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta render-ka dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa in turjumaadahaaga lagu soo bandhigo dhinaca server‑ka. Tani waxay si weyn u wanaajinaysaa khibradda isticmaale iyadoo la muujinayo nuxurka la turjumay isla markiiba, halkii uu ka jiri lahaa muqaal gaaban oo nuxur aan la turjumin markii hore. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, maadaama aan horey u haysanno dhammaan turjumaadaha aan u baahanahay.

Waxaan ku bilaabi doonaa abuurista ama wax ka beddelka /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Wax ka beddel hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga ee dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama staging (isProduction is false), waxaanu adeegsan doonaa furaha sirta ah read/write ee API-ga si loo hubiyo in xarigyo qoraal cusub loo diro turjumaadda.

Illaa hadda, waxaan kaliya u dejinay codsiga Next.js liistada luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad u isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahan waxay qaataan saddex dood: hal shay Next.js Static Props Context, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Fiiro gaar ah: revalidate ee getTacoTranslateStaticProps waxaa asal ahaan loo dejiyey 60, si tarjumaadahaagu ay u sii ahaadaan kuwo casri ah.

Si aad midkood uga isticmaasho bog, aan u qaadanno inaad haysato fayl bog ah sida /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Hadda waad isticmaali kartaa qaybta Translate si aad u turjunto xadhkaha ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Tallaabada 5: Deji oo tijaabi!

Waannu dhamaynay! Codsigaaga React hadda si toos ah ayaa loo turjumi doonaa marka aad wax qoraal ah ku darto qaybta Translate. Ogow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xadhigo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato deegaan staging oo xiran oo ammaan ah, halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, adigoo ku daraya xadhigo cusub ka hor inta aanad si rasmi ah u hawlgelin. Tani waxay ka hortagi doontaa in qofna qofna uu xado furahaaga API ee qarsoodiga ah, sidoo kalena ay ka hortagi karto in mashruucaaga turjumaadda uu buuxsamo iyadoo la darayo xadhigo cusub oo aan xiriir la lahayn.

Hubi inaad eegto tusaalaha dhammeystiran ee ku yaal profile-keena GitHub. Halkaas waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo iyadoo la isticmaalayo App Router! Haddii aad la kulanto wax dhibaato ah, xor ayaad u tahay inaad nala soo xiriirto, waan ku farxi doonnaa inaan ku caawinno.

TacoTranslate waxay si otomaatig ah u turjumaysaa una maxallaynaysaa codsiyadaada React si dhakhso ah loona turjumo in ka badan 75 luqadood. Bilow maanta!