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.

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.

Tallaabada 4: Hirgelinta render-ka 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 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 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!