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

Markay adduunku sii globalaysanayo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaale ka socda dalal iyo dhaqamo kala duwan. Mid ka mid ah siyaabaha ugu waaweyn ee arrintan lagu gaaro waa iyada oo loo marayo caalamiyeynta (i18n), taasoo kuu oggolaaneysa inaad codsigaaga ugu habboonaato luqado, lacago, iyo qaabab taariikheed kala duwan.

Tusaalaha casharkan, waxaan baari doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Fiiri tusaalaha oo dhamaystiran halkan.

Hagahan waxa uu u yahay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaaleyso App Router, fadlan eeg hagahan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeynta (internationalization) 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, waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayaa u turjunta xarriijimahaaga luuqad kasta iyadoo adeegsanaysa AI casri ah, wuxuuna kaa xoraynayaa maaraynta caajiska ah ee faylasha JSON.

Aynu ku rakibno iyadoo la adeegsanayo npm terminal-kaaga:

npm install tacotranslate

Talaabada 2: Abuur akoon bilaash ah oo TacoTranslate ah

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

Gudaha TacoTranslate application UI, abuuro mashruuc, kadibna u gudub tabka furayaasha API-ga. Abuuro hal furaha read, iyo hal furaha read/write. Waxaan ku keydin doonaa sida isbeddelada deegaanka. Furaha read waa waxa aan ugu yeerno public, halka furaha read/write uu yahay secret. Tusaale ahaan, waxaad ku dari kartaa faylka .env oo ku yaal xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubi in aadan waligaa ku shidin sirta read/write furaha API-ga deegaanka wax soo saarka ee dhinaca macaamiisha.

Waxaan sidoo kale ku dari doonaa laba beddelka deegaan dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda caadiga ah ee la isticmaalo marka aan la helin tarjumaad kale. Tusaalahan, waxaan u dejin doonaa en Ingiriis.
• TACOTRANSLATE_ORIGIN: “Folder”-ka ay ku keydsan doonaan xarafkaaga, sida URL-ka boggaaga internetka. Wax badan ka akhri asal ahaan halkan.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Tallaabada 3: Dejinta TacoTranslate

Si aad ugu dhex dareento TacoTranslate codsigaaga, waxaad u baahan doontaa inaad abuurto macmiil adigoo adeegsanaya furayaasha API-ga ee hore loo soo siiyey. Tusaale ahaan, abuuri file 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 si toos ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Abuurista client-ka fayl gooni ah ayaa ka dhigaysa mid sahlan in mar kale la isticmaalo mustaqbalka. Hadda, adigoo isticmaalaya /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 custom pageProps iyo _app.tsx, fadlan ballaadhi qeexitaankooda adigoo adeegsanaya hantida iyo koodhka kore.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate wuxuu u oggolaanayaa server side rendering ee turjumaadahaaga. Tani waxay si weyn u hagaajinaysaa waayo-aragnimada isticmaale iyadoo isla markiiba muujinaysa waxyaabaha la turjumay, halkii ay ka ahaan lahayd muuqaal kooban oo wax aan la turjumin ah marka hore. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee 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 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 ku dejinay codsiga Next.js liiska luqadaha la taageeray. Waxa xiga ee aan sameyn doono waa inaan soo qaadano turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Funkisyadani waxay qaataan saddex dookh: Hal shay Next.js Static Props Context, qaabeynta TacoTranslate, iyo hantida ikhtiyaariga ah ee Next.js. Ogow in revalidate ee ku jira getTacoTranslateStaticProps loo dejiyey 60 asal ahaan, si turjumadaadu ay u ahaato mid casriyeysan.

Si aad mid ka mid ah funkisyadan uga isticmaasho bog, aan qiyaasno inaad haysato fayl 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 awoodaa inaad isticmaasho qaybta Translate si aad u turjunto xarumaha ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waan dhammaynay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira Translate qaybta. Ogow in kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato deegaan xirmaya oo ammaan ah oo aad ku tijaabiso codsigaaga wax-soo-saarka iyadoo la adeegsanayo fure API ah oo sidan oo kale ah, adigoo ku daraya xarfo cusub ka hor inta aanad hawlgelin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, iyo sidoo kale inay suurtogal noqoto in mashruuca turjumaadaada uu buuxsamo xarfo cusub oo aan la xiriirin.

Hubi inaad eegto tusaalaha dhammeystiran ee ku yaal profile-keena GitHub. Halkaas, sidoo kale waxaad ka heli doontaa tusaale muujinaya sida tan loo sameeyo adigoo adeegsanaya App Router! Haddii aad dhibaatooyin la kulanto, xor ayaad u tahay inaad nala soo xiriirto, annagana aad ayaan ugu farxi doonnaa inaan kaa caawino.

TacoTranslate waxay kuu oggolaaneysaa inaad si otomaatig ah ugu turjunto barnaamijyada React luqadaha ka badan 75 si degdeg ah oo fudud. Maanta bilow!