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

Marka adduunku sii noqdo mid caalami ah, waxaa sii kordhaya muhiimadda ay leedahay in horumariyayaasha webku dhisaan codsiyo u adeegaya isticmaaleyaal ka kala socda dalal iyo dhaqanrooyin kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyada oo loo marayo caalamiyeynta (internationalization - i18n), taasoo kuu oggolaanaysa inaad codsigaaga u habayso luuqado, 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: Fiiri tusaalaha oo dhammeystiran halkan.

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

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeenta (internationalization) codsigaaga Next.js, waxaan marka hore dooran doonaa maktabad i18n. Waxaa jira maktabado badan oo caan ah, oo ay ku jiraan next-intl. Si kastaba ha noqotee, tusaalahan, waxaan adeegsan doonnaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u tarjumaa xargahaaga luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreynayaa maaraynta dhibta leh ee faylasha JSON.

Aan ku rakibno adigoo isticmaalaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 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 ee la xiriira. Halkan ka samee akoon. Waa bilaash, waxaana aan loo baahnayn inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuri mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuri hal furaha read ah, iyo hal furaha read/write ah. Waxaan ku keydin doonaa sidii isku-duweyaasha deegaanka (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 waligeed sirta ah read/write API key u faafin deegaanada soo saaridda dhinaca macaamiisha.

Waxaan sidoo kale ku dari doonnaa laba beddelayaal degaan oo dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee la isticmaalo marka kale. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: “galka” lagu keydin doono xarafyadaada, sida URL-ka mareegtaada. Halkan ka akhriso wax intaas ka badan oo ku saabsan asalka.

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

Tallaabada 3: Dejinta TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 dhowaan.

Abuurista macaamilka fayl kala duwan ayaa ka dhigaysa mid sahlan in mar dambe la isticmaalo. Hadda, anagoo adeegsanayna /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 gaar ah, fadlan ku kordhi qeexida astaamaha iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate waxay oggolaaneysaa in tarjumaadahaaga lagu soo bandhigo dhinaca server-ka. Tani waxay si weyn u hagaajisaa waayo-aragnimada isticmaale iyada oo muujineysa waxyaabaha tarjuman isla markiiba, halkii ay ka ahaan lahayd ifafaale kooban oo ah wax aan la turjumin marka hore. Intaas waxaa sii dheer, waxaan iska indho tiri karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah horey ayaan u haynaa dhammaan tarjumaadaha aan u baahanahay.

Waxaan ku bilaabi doonaa inaan abuurno ama wax ka beddelno /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 bedel jeeg isProduction si aad ugu habboonaato qaabkaaga. Haddii true, TacoTranslate waxay dusha ka saari doontaa muhiimka ah API dadweynaha. Hadaynu ku jirno goob maxali ah, tijaabo, ama jawi goob-socodka (isProduction is false), waxaanu isticmaali doonaa furaha sirta read/write API si loo hubiyo in xadhig cusub loo diro si loo turjumo.

Ilaa iyo hadda, waxaan u diyaarinay oo keliya in la codsaddo Next.js oo ay ku qoran yihiin liistada luuqadaha ay taageerayaan. Waxa xiga aan sameyno waa soo qaado tarjumaadaha boggaga oo dhan. Si aad taas u sameyso, waxaad isticmaali getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyada oo ku saleyneysa shuruudahaaga.

Hawlahani waxay qaadanayaan saddex doodood: Hal walax Next.js Static Props Context , qaabeynta TacoTranslate, iyo guryaha Next.js optional. Ogsoonow in revalidate on getTacoTranslateStaticProps lagu wadaa in ay 60 by default, si aad u turjumidda joogo ilaa-to-date.

Si aad u isticmaasho labada function ee bogga, aynu u qaadan in aad leedahay file page a 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! Codsigaaga React hadda si toos ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Ogow in kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo turjuman. Waxaan kugula talineynaa inaad yeelato deegaan xiriran oo ammaan ah oo tijaabo ah halkaas oo aad ku tijaabin karto codsigaaga wax soo saar leh furaha API-ga noocaas ah, adigoo ku daraya xarfo cusub ka hor intaadan si toos ah u sii dayn. Tani waxay ka hortagi doontaa qof kasta inuu xado furahaaga sirta ah ee API-ga, sidoo kalena ka hortagi doontaa in mashruucaaga turjumaada uu buuxsamo xarfo cusub oo aan la xiriirin.

Hubi inaad eegto tusaalaha dhamaystiran ee ku yaal profile-keena GitHub. Halkaas, waxaad sidoo kale ka heli doontaa tusaale ku saabsan sida tan looga sameeyo adigoo adeegsanaya App Router ! Haddii aad wax dhibaato ah la kulanto, fadlan ha ka waaban inaad nala soo xiriirto, waxaanan aad ugu farxi doonaa inaan kaa caawino.

TacoTranslate wuxuu kuu oggolaanayaa inaad si toos ah u turjunto barnaamijyada React si dhaqso leh luuqad kasta oo aad doonto. Kala bilaaw maanta!