Xalka ugu fiican ee caalamiyeynta (i18n) ee barnaamijyada Next.js

Sida ay u shaqeyso

Marka adduunku uu sii kobcayo oo uu noqdo mid caalami ah, waxay sii kordheysaa muhiimadda ay leedahay in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaale ka socda dalal iyo dhaqammo kala duwan. Mid ka mid ah hababka ugu waaweyn ee tan lagu gaari karo waa iyada oo la adeegsanayo internationalization (i18n), taasoo kuu oggolaaneysa inaad la qabsato codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Tutorial-kan, waxaan ku baran doonaa sida loo daro internationalization codsigaaga React Next.js, iyadoo la adeegsanayo server side rendering. TL;DR: Halkan ka eeg tusaalaha buuxa.

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

Tallaabada 1: Ku rakib maktabad i18n

Si aad u hirgeliso isku-dhafka caalamiyeynta (internationalization) ee codsigaaga Next.js, markii hore waxaan dooran doonnaa 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 ayuu uga turjumaa xarriiqyadaada luqad kasta adoo adeegsanaya AI casri ah, wuxuuna kaa xoreynayaa maaraynta daalaysa ee faylasha JSON.

Aan ku rakibno adigoo isticmaalaya npm gudaha terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoont TacoTranslate oo bilaash ah

Hadda oo aad rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumid, iyo furayaal API oo la xiriira. Halkan ka samee akoon. Waa bilaash, isla markaana ma u baahna inaad ku darto kaarka deynta.

Gudaha TacoTranslate UI-ga codsiga, samee mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Samee hal furaha read ah, iyo hal furaha read/write ah. Waxaan ku keydin doonaa sidii isbeddellada deegaanka. Furaha read waa waxa aynu 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 waligaa sirta ah read/write API key u faafin deegaanada wax soo saarka ee dhinaca macaamiisha.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee dhici doonta haddii mid kale aanu jirin. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriis.
• TACOTRANSLATE_ORIGIN: "Khaanadda" halkaas oo xarriijimahaaga lagu keydin doono, sida URL-ka boggaaga. Halkan ka akhri wax dheeraad ah oo ku saabsan asalka.

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 isticmaalaya 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 si toos ah u qeexi doonaa TACOTRANSLATE_API_KEY dhowaan.

Abuurista macmiilka fayl gooni ah waxay ka dhigeysaa mid sahlan in 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 ku dar qeexitaanka hantida iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate waxay u oggolaaneysaa turjumaadahaaga in lagu sameeyo server side rendering. Tani waxay si weyn u hagaajinaysaa waayo-aragnimada isticmaalaha iyadoo lagu soo bandhigayo macluumaadka turjuman si dhaqso ah, halkii hore looga arki lahaa macluumaad aan turjumneyn oo kumeelgaar ah. Intaa waxaa sii dheer, waxaan ka boodi karnaa codsiyada shabakadda dhinaca macmiilka, sababtoo ah waxaan horey u haynaa dhammaan turjumaadaha aan u baahan nahay.

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.

Ilaa hadda, waxaan kaliya u dejinay codsiga Next.js liiska luqadaha la taageeray. Waxa xiga ee aan sameyn doonno waa inaan soo qaadano turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo loo eegayo shuruudahaaga.

Howlahaani waxay qaataan seddex doodood: Mid ah shay Next.js Static Props Context, qaabeynta TacoTranslate, iyo hantiyaal ikhtiyaari ah oo Next.js ah. Ogoow in revalidate ee ku jira getTacoTranslateStaticProps si caadi ah loogu dejiyay 60, si turjumaadahaagu u ahaadaan kuwo had iyo jeer la cusbooneysiiyo.

Si aad mid ka mid ah howlahaas ugu isticmaasho bog, aan qaadanno inaad leedahay fayl bog oo la yiraahdo /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 xarfo ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Soo saar oo tijaabi!

Waan dhamaynay! Hadda codsigaaga Next.js si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xarfo kasta oo ku jira qaybta Translate. Ogow in kaliya deegaanka leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfaha cusub ee la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan xiran oo ammaan ah oo aad ku tijaabin karto codsigaaga wax soo saarka adoo adeegsanaya furaha API-ga noocaas ah, adigoo ku daraya xarfaha cusub ka hor intaadan la noolaan. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, sidoo kalena laga yaabo inuu kordhiyo mashruuca turjumaada adigoo ku daraya xarfaha cusub ee aan xiriirka lahayn.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!