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

Maadaama adduunku sii caalami noqdo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo la qabsan kara isticmaaleyaasha ka kala yimid dalal iyo dhaqan kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyada oo loo marayo caalamiyeenta (i18n), taasoo kuu oggolaanaysa inaad adapto codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Casharkan, waxaan sahmin doonaa sida loo daro caalamiyeenta codsigaaga React Next.js, oo leh server side rendering. TL;DR: Halkan ka eeg tusaalaha buuxa.

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagahan beddelka ah.

Tallaabada 1: Ku rakib maktabad i18n ah

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

TacoTranslate si otomaatig ah ayaa u turjumaa xarafkaaga luqad kasta iyadoo la adeegsanayo AI casri ah, waxayna kaa xoraysaa maaraynta dhibka badan ee faylasha JSON.

Bal aan ku rakibno adigoo isticmaalaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Samee akoon lacag la’aan ah oo TacoTranslate ah

Hadda oo aad rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Halkan ka samee akoon. Waa bilaash, waxaana aadan u baahnayn inaad ku darto kaarka deynta.

Gudaha UI-ga barnaamijka TacoTranslate, abuuro mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuro hal furaha read, iyo hal furaha read/write. Waxaan ku kaydin doonaa sida deegaanka isbeddelka (environment variables). 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 sirta ah read/write API keyga u sii dayn deegaanka wax soo saarka dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa laba beddel deegaanka kale: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asal ahaan la isticmaalayo marka kale la waayo. Tusaalahan, waxaan u deyn doonaa en oo macnaheedu yahay Ingiriisi.
• TACOTRANSLATE_ORIGIN: “Folder”-ka meesha xarfooyinkaaga lagu kaydin doono, sida URL-ka boggaaga. Halkan ka akhriso wax badan oo ku saabsan asalka.

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 hore. Tusaale ahaan, abuuri feyl 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Waxaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Abuurista macmiilka fayl gaar ah waxay ka dhigaysaa mid sahlan in mar kale la isticmaalo mustaqbalka. Hadda, iyadoo la adeegsanayo /pages/_app.tsx gaar ah, waxaan ku dari doonaa 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 gaar ah iyo _app.tsx, fadlan ku kordhi qeexida hantida iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate waxay kuu ogolaanaysaa soo-saarista dhinaca server-ka ee turjumaadahaaga. Tani waxay si weyn u hagaajinaysaa khibradda isticmaale iyadoo lagu muujinayo nuxurka turjuman isla markiiba, halkii ay ka ahaan lahayd iftiinka nuxurka aan turjumanayn ee ugu horreeya. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee macmiilka, maaddaama aan horay u heysanno 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 ula jaanqaado habayntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga ee dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama marxaladda (isProduction is false), waxaanu isticmaali doonaa furaha sirta ah ee read/write API si loo hubiyo in xarfo cusub loo diro turjumaadda.

Ilaa hadda, waxaan kaliya dejinay codsiga Next.js oo leh liis luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadanno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran baahidaada.

Howlahan waxay qaataan saddex doodood: Hal shay oo Next.js Static Props Context ah, qaabeynta TacoTranslate, iyo sifooyin opzional ah oo Next.js ah. Oggow in revalidate ku yaala getTacoTranslateStaticProps uu si caadi ah ugu dejisan yahay 60, si turjumadaada ay u ahaato mid casriyeysan.

Si aad u isticmaasho midkood hawlahaas bog, aan u qaadanno inaad haysato feyl bog ah oo la mid ah /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!"/>;
}

Waad hadda awoodaa inaad isticmaasho qaybta Translate si aad u turjunto xarfo ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waan dhamaynay! Codsigaaga React wuxuu hadda si otomaatig ah u turjummi doonaa markaad ku darto xarfo kasta oo cusub qaybta Translate. Ogow in kaliya deegaanada leh rukhsadda read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan ku talineynaa inaad yeelato deegaan xirnaan leh oo ammaan ah oo staging ah halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo adeegsanaya furaha API-ga sidaas, adigoo ku daraya xarfo cusub ka hor intaadan bixinin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, sidoo kalena ay ka hortagto in mashruucaaga turjumaadda uu buuxsamo adigoo ku daraya xarfo cusub oo aan xiriir la lahayn.

Hubso inaad fiiriso tusaalaha dhameystiran ee ku jira profile-keena GitHub. Halkaas, sidoo kale waxaad ka heli doontaa tusaale muujinaya sida loo sameeyo tan adigoo isticmaalaya App Router ! Haddii aad la kulanto wax dhibaato ah, si xor ah u nala soo xiriir, waana ku farxi doonaa inaan kaa caawino.

TacoTranslate waxay kuu oggolaaneysaa inaad si otomaatig ah u turjunto codsiyada React aad si degdeg ah ugana turjunto af kasta. Bilow maanta!