Sida loo hirgeliyo is-dhaafsiga luqadaha (internationalization) ee codsi Next.js ah oo isticmaalaya Pages Router

Maadaama adduunku sii globalnimo u socdo, waxaa sii muhiim noqoneysa in horumariyayaasha webka ay dhisaan codsiyo dabooli kara isticmaaleyaal ka kala socda dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaadhi karo waa iyada oo loo marayo caalamiyeynta (i18n), taasoo kuu oggolaaneysa inaad la qabsato codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Casharkan, waxaan ku sahamin doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Halkan ka daawo tusaalaha buuxa.

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagekan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso turjumaadda caalamiga ah ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n ah. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jirto next-intl. Si kastaba ha noqotee, tusaalahan, waxaan isticmaaleynaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu ugaga turjumaa xargahaaga luuqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa sii deynayaa maamulka caajiska ah ee faylalka JSON.

Aynu ku rakibno anagoo adeegsaneyna npm ee terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Samee akoon TacoTranslate oo bilaash ah

Hadda oo aad ku rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc tarjumaad, iyo furayaasha API ee la xiriira. Halkan ka abuuro akoon. Waa bilaash, sidoo kalena makuu baahna inaad ku darto kaarka deynta.

Gudaha TacoTranslate codsiga UI-ga, samee mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuri hal [read furaha, iyo hal [read/write furaha. Waxaan ku keydin doonaa sida beddelayaasha 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 sirta ah ee read/write API keyga u dhicin deegaanka wax soo saarka dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa laba doorsoomayaal deegaan oo kale: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee la isticmaalayo marka mid kale aanu helmin. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: “Folder”-ka ay ku kaydsan doonaan xarafyadaada, sida URL-ka website-kaaga. Wax badan ka aqri asal ahaan 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 hore loo soo siiyay. Tusaale ahaan, samee fayl 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 toos ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Abuuridda macaamilka file gooni ah ayaa ka dhigaysa mid sahlan in mar dambe mar kale la isticmaalo. Hadda, iyadoo la adeegsanayo /pages/_app.tsx khaas 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 iyo _app.tsx, fadlan ballaadhso qeexitaanka adigoo adeegsanaya hantida iyo koodhka kor ku xusan.

Talaabada 4: Hirgelinta server side rendering

TacoTranslate wuxuu oggolaanayaa turjumaadahaaga in lagu soo bandhigo server-ka dhinaciisa. Tani waxay si weyn u hagaajinaysaa waayo-aragnimada isticmaaleha iyadoo si degdeg ah loogu soo bandhigayo macluumaadka la turjumay, halkii marka hore laga muujin lahaa macluumaad aan la turjumin. Intaas waxaa sii dheer, waxaan ka dhaafi 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 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 u dejinay codsiga Next.js liiska luqadaha la taageeray. Waxa xiga ee aan qaban 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 baahiyahaaga.

Howlahaani waxay qaataan saddex doodood: Hal shay Next.js Static Props Context, qaabeynta TacoTranslate, iyo sifooyin ikhtiyaari ah oo Next.js ah. Ogow in revalidate ee ku jira getTacoTranslateStaticProps lagu dejiyay 60 si caadi ah, si turjumaadahaaga ay had iyo jeer u cusboonaysiiyaan.

Si aad mid ka mid ah howlahaas ugu isticmaasho bog, aan qaadanno inaad leedahay 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 waa inaad awoodaa inaad isticmaasho qaybta Translate si aad u turjunto xarafyada dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waxaanu dhamaystirnay! Hadda codsigaaga React si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Ogeysiis, kaliya jawiyada leh rukhsadaha read/write ee furaha API-ga ayaa awood u yeelan doona inay abuuraan xarfo cusub oo la turjumo. Waxaan kugula talineynaa inaad yeelato jawi tijaabo oo xiran oo ammaan ah (staging environment) halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API noocaas ah, adigoo ku daraya xarfo cusub kahor inta aanad si rasmi ah u bilaabin. Tani waxay ka horjoogsan doontaa qof kasta inuu xado furahaaga sirta ah ee API-ga, isla markaana laga yaabo in mashruucaaga turjumaadda uu buuxsamo xarfo cusub oo aan la xidhiidhnayn.

Hubso inaad fiiriso tusaalaha dhamaystiran ee ku jira astaanta GitHub-keena. Halkaas, waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo adoo adeegsanaya App Router ! Haddii aad la kulanto wax dhibaato ah, si xor ah u nala soo xiriir, waana ku farxi doonnaa inaan kaa caawinno.

TacoTranslate waxay kuu oggolaanaysaa inaad si otomaatig ah u turjunto codsiyadaada React si degdeg ah iyo luqado ka badan 75. Bilow maanta!