Xalka ugu fiicani ee ku saabsan caalamiyeynta (i18n) ee barnaamijyada Next.js

Sida ay u shaqayso

Maaddaama adduunku sii ballaaranayo, waxay noqoneysaa mid aad muhiim u ah horumariyeyaasha webka inay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala imanaya wadamo iyo dhaqan kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyada oo la adeegsanayo caalamiyeenta (i18n), taas oo kuu oggolaanaysa inaad u habeyso codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Casharkan, waxaan ku sahamin doonaa sida loogu daro caalamiyeenta codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Tus tusaalaha buuxa halkan.

Tilmaantan waxaa loogu talagalay codsiyada Next.js ee adeegsanaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan halkii arag tilmaantan.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso is-dhexgalka caalamiga ah ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n ah. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jiraan next-intl. Si kastaba ha ahaatee, tusaalahaan, waxaan u adeegsan doonaa TacoTranslate.

TacoTranslate si toos ah ayaa u turjumaa xarafyadaada luqad kasta iyadoo la adeegsanayo AI casri ah, waxaana uu kaa freedaa maaraynta daalasha leh ee faylasha JSON.

Aan ku rakibno adigoo adeegsanaya npm ee terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur koonto TacoTranslate oo bilaash ah

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

Gudaha TacoTranslate interface-ka codsiga, abuuri mashruuc, kadibna u gudub tabka furayaasha API-ga. Abuuri hal furaha read ah, iyo hal furaha read/write ah. Waxaan ku keydin doonaa sidii doorsoomayaasha deegaanka. Furaha read waxa aan ugu yeernaa 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 read/write API key ka bixin deegaanada wax soo saarka ee dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa laba isbeddel oo deegaanka ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka asalka ah ee luqadda magdhowga ah. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriis.
• TACOTRANSLATE_ORIGIN: “Faylka” meesha erayadaada lagu keydin doono, sida URL-ka boggaaga. Halkan ka akhriso wax badan oo ku saabsan asalka.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad codsigaaga ugu dhexgaliso TacoTranslate, waxaad u baahan doontaa inaad abuurto macmiil isticmaalaya furayaasha API ka hor. Tusaale ahaan, samee fayl lagu magacaabo /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 otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY dhowaan.

Abuurista client-ka fayl gooni ah waxay ka dhigeysaa mid sahlan in mar kale la isticmaalo mustaqbalka. Hadda, anagoo adeegsanayna custom /pages/_app.tsx, 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 khaas ah, fadlan ballaadhi qeexitaanka adoo adeegsanaya hantida iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta server ka dhinaca rendering

TacoTranslate waxay kuu oggolaaneysaa in tarjumaadahaaga lagu soo bandhigo server-ka dhiniciisa. Tani waxay si weyn u hagaajisaa waayo-aragnimada isticmaaleha iyadoo si degdeg ah loo muujinayo macluumaadka la turjumay, halkii marka hore laga soo bandhigi lahaa macluumaad aan la turjumin oo si kooban u muuqda. Intaas waxaa dheer, waxaan ka dhimi karnaa codsiyada shabakadda ee dhinaca macaamilka, sababtoo ah waxaan horey u haynaa dhammaan tarjumaadihii aan u baahnayn.

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 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.

Illaa hadda, waxaan kaliya dejinnay codsiga Next.js liiska luqadaha la taageeray. Waxa xiga ee aan sameyn doono waa inaan soo qaadanno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku saleysan shuruudahaaga.

Farsamooyinkan waxay qaataan seddex dooddo: Hal shay oo ah Next.js Static Props Context, qaabeynta TacoTranslate, iyo hanti doorsoomayaal ah oo Next.js ah. Ogoow in revalidate ee ku jira getTacoTranslateStaticProps si caadi ah loo dejiyey 60, si tarjumaadahaagu ay u sii ahaadaan kuwo casri ah.

Si aad mid kasta oo ka mid ah farsamooyinkan ugu isticmaasho bog, aan u qaadanno 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 awood u yeelatid inaad isticmaasho qeybta Translate si aad u turjunto xarfo ku dhex 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 Next.js ayaa si toos ah loo turjumi doonaa markaad ku darto xarfo cusub oo ku jira qaybta Translate. Ogeysiis 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 tijaabo oo xiran oo ammaan 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 noolayn. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga API-ga qarsoon, isla markaana laga hortago in mashruucaaga turjumaadda uu buuxsamo xarfo cusub oo aan xiriir la lahayn.

Hubi inaad eegto tusaalaha dhameystiran ee ku yaala profile-keena GitHub. Halkaas, waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo iyadoo la adeegsanayo App Router! Haddii aad wax dhibaato ah la kulanto, xor ayaad u tahay inaad nala soo xiriirto, waxaana si weyn kuugu caawin doonaa.

TacoTranslate waxay kuu oggolaaneysaa inaad si otomaatig ah ula qabsato codsiyada React si dhaqso leh luuqad kasta iyo luuqad kasta oo kale. Bilow maanta!