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

Iyada oo adduunku sii caalamiyeedo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaal ka kala imaanaya dalal iyo dhaqanno kala duwan. Mid ka mid ah siyaabaha ugu waaweyn ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habeyso codsigaaga luqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

Casharkan, waxaanu sahamin doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo rendering-ka dhinaca server-ka. TL;DR: Eeg tusaalaha buuxa halkan.

Tilmaamahan waxa uu khuseeyaa codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg tilmaamahan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeenta (internationalization) ee codsigaaga Next.js, marka hore waxaan dooran doonnaa maktabad i18n. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jirto next-intl. Si kastaba ha noqotee, tusaalahaan, waxaanu adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xadhigyadaada luqad kasta isagoo adeegsanaya sirdoonka macmalka ah ee horumarsan, wuxuuna kaa xoreynayaa maaraynta caajiska ah ee faylalka JSON.

Aynu ku rakibno anagoo isticmaalayna npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur xisaab TacoTranslate oo bilaash ah

Hadda oo aad ku rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Abuur akoon halkan. Waa bilaash, oo uma baahna inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuro mashruuc, ka dibna u gudub tab-ka furayaasha API-ga. Abuur hal furaha read iyo hal furaha read/write. Waxaan ku keydin doonaa sida doorsoomayaal deegaanka ah. 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 in aadan waligaa u faafin furaha sirta ah ee API-ga read/write deegaanka 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 geliso codsigaaga, waxaad u baahan doontaa inaad abuurto macmiil adigoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuro fayl 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Waxaan dhowaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY.

Abuurista client-ka fayl gooni ah waxay ka dhigaysaa mid sahlan in mar dambe dib loo isticmaalo. Hadda, anagoo adeegsanayna faylka gaarka ah ee /pages/_app.tsx, waxaan ku dari doonaa provider-ka 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.

Step 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa in turjumaadahaaga lagu soo saaro dhinaca server-ka. Tani waxay si weyn u hagaajinaysaa khibradda isticmaalaha, maadaama ay isla markiiba muujiso macluumaadka la turjumay, halkii ay marka hore ka muuqan lahayd wax kooban oo aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan horey u haynaa 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 dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama staging (isProduction is false), waxaanu isticmaali doonaa furaha sirta ah ee read/write API si loo hubiyo in xadhigyo cusub loo diro turjumaad.

Illaa hadda, waxaan kaliya u dejinnay codsiga Next.js liiska luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa midkood getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran baahidaada.

Hawlahan waxay qaataan saddex dooddo: hal shay oo ah Next.js Static Props Context, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Ogsoonow in revalidate ee ku jira getTacoTranslateStaticProps si caadi ah loogu dejiyey 60, si turjumaadahaagu u sii ahaadaan kuwo la cusbooneysiiyay.

Si midkood loogu isticmaalo bog, aynu u qaadanno inaad leedahay feyl bog 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 waa inaad awood u yeelataa inaad isticmaasho qaybta Translate si aad u tarjumto xadhigyada ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Deji oo tijaabi!

Waannu dhamaynay! Barnaamijkaaga React hadda si otomaatig ah ayaa loo turjumayaa markaad ku darto xargo kasta qaybta Translate. Ogow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API ay awoodi doonaan inay abuuraan xargo cusub oo la turjumo. Waxaan ku talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah si aad ugu tijaabiso barnaamijkaaga wax-soo-saarka adigoo adeegsanaya furaha API-ga noocaas ah, adigoo ku daraya xargo cusub ka hor inta aan la hawlgelin. Tani waxay ka horjoogsan doontaa qof kasta qofna inuu xado furahaaga qarsoon ee API-ga, isla markaana suurtogal ahaan inay mashruucaaga turjumaadda ku buuxsanto iyadoo lagu darayo xargo cusub oo aan xiriir la lahayn.

Hubi inaad fiiriso tusaalaha buuxa ee ku jira profile-keena GitHub. Halkaas waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loo sameeyo adigoo adeegsanaya App Router! Haddii aad dhibaato la kulanto, si xor ah nala soo xiriir, waanan ku farxi doonaa inaan kaa caawinno.

TacoTranslate wuxuu si otomaatig ah u turjumi karaa codsiyadaada React, isagoo taageera in ka badan 75 luqadood. Bilow maanta!