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

Sida ay u shaqeyso

Marka adduunku sii caalami noqdo, waxaa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala imanaya dalal iyo dhaqan kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taas oo kuu oggolaanaysa inaad codsigaaga u habayn karto luqado, lacago, iyo qaababka taariikhda ee kala duwan.

Casharkan, waxaan ka eegi doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo soo-saarid dhinaca server-ka. TL;DR: Eeg tusaalaha buuxa halkan.

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

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeynta (internationalization) ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabadood oo caan ah, oo ay ku jiraan next-intl. Si kastaba ha noqotee, tusaalahan, waxaan isticmaali doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xadhkahaaga luqad kasta isagoo adeegsanaya AI heer sare ah, wuxuuna kaa xoreynayaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno annagoo isticmaalayna npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur xisaab TacoTranslate oo bilaash ah

Hadda oo aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Halkan iska diiwaan geli. Waa bilaash, mana looga baahan yahay inaad ku darto kaarka deynta.

Gudaha is-dhexgalka TacoTranslate ee codsiga, abuuro mashruuc, kuna soco tab-ka furayaasha API-ga. Abuuro hal read furaha, iyo hal read/write furaha. Waxaan ku keydin doonaa iyaga sida doorsoomayaasha deegaanka. Furaha read waa waxa aan ugu yeerno public iyo furaha read/write waa 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 shaacin furaha sirta ah ee API-ga read/write deegaanka wax-soo-saarka dhinaca macmiilka.

Sidoo kale, waxaan ku dari doonaa labo doorsoome deegaanka ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda (locale) caadiga ah ee dib loogu laabto. Tusaalahan, waxaan u dejin doonaa en (Ingiriisi).
• TACOTRANSLATE_ORIGIN: “Gal” meesha xarigyadaada lagu kaydin doono, sida URL-ka boggaaga. Wax dheeraad ah ka akhri asalada halkan.

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

Tallaabada 3aad: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuro 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;

Si otomaatig ah ayaan dhawaan u qeexi doonaa TACOTRANSLATE_API_KEY.

Abuurista client-ka fayl gooni ah waxay ka dhigaysaa in dib loo isticmaali karo goor dambe. Hadda, iyadoo la isticmaalayo /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 pageProps iyo _app.tsx gaar ah, fadlan kordhi qeexitaanka adigoo ku daraya sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta soo saarista dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa soo-saaridda turjumaadahaaga dhinaca server-ka. Tani si weyn ayay u hagaajinaysaa waayo-aragnimada isticmaalaha, maadaama ay isla markiiba soo bandhigto nuxurka la turjumay, beddelkii in marka hore muuqdo nuxur aan la turjumin. Sidoo kale, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, maxaa yeelay horey ayaan u haynaa dhammaan turjumaadaha 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'),
	});
};

U habee hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama deegaanka staging (isProduction is false), waxaan isticmaali doonaa furaha sirta ah ee read/write si loo hubiyo in xadhigyo cusub loo diro turjumaadda.

Ilaa hadda, kaliya waxaan u dejinnay codsiga Next.js liiska luqadaha la taageeray. Tallaabada xigtana waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahan waxay qaataan saddex shay: hal Next.js Static Props Context walax, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Ogsoonow in revalidate ee ku jira getTacoTranslateStaticProps si caadi ah loogu dejiyey 60, si turjumaadaadu ay u sii ahaato mid casriyeysan.

Si midkood loogu isticmaalo bog, aynu u qaadanno inaad leedahay 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 waad isticmaali kartaa Translate qaybta si aad u tarjumto xargaha ku jira dhammaan qaybaha React-kaaga.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Ku-deji oo tijaabi!

Waan dhamaynay! Barnaamijkaaga Next.js hadda si otomaatig ah ayaa loo turjumi doonaa marka aad qaybta Translate ku darto qoraal kasta. Ogow in kaliya deegaanada leh rukhsadaha read/write ee furaha API ay awoodi doonaan inay abuuraan qoraallo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API noocaas ah, adigoo ku daraya qoraallo cusub ka hor intaadan si rasmi ah u hawlgelin. Tani waxay ka hortagi doontaa in qof kasta qof kasta uu xado furahaaga qarsoon ee API, iyo sidoo kale inay ka hortagto in mashruucaaga turjumaadda uu buuxsamo iyadoo lagu darayo qoraallo cusub oo aan la xiriirin.

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!