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

Sida ay u shaqeyso

Maaddaama dunidu ay sii caalamiyeesmayso, waxay sii kordhaysaa muhiimadda in horumariyeyaasha webku ay dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala imaanaya dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habeyso codsigaaga luqado, lacagaha, iyo qaababka taariikhda kala duwan.

Casharkan, waxaanu ku sahamin doonaa sida loogu daro caalamiyeynta (i18n) codsigaaga React Next.js, iyadoo la adeegsanayo soo bandhigga 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 beddelka ah.

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 jirto next-intl. Si kastaba ha noqotee, tusaalahan, waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xarriiqahaaga luqad kasta isagoo adeegsanaya AI horumarsan, wuxuuna kaa xoreynayaa maaraynta dhibka badan ee faylasha JSON.

Aan ku rakibno adoo adeegsanaya npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda markii aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API ee la xiriira. Halkan iska diiwaan geli. Waa bilaash, oo ma u baahnid inaad ku darto kaarka deynta.

Gudaha UI-ga barnaamijka TacoTranslate, abuuro mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuur hal read furaha, iyo hal read/write furaha. Waxaan ku kaydin doonaa iyaga 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 shaacin furaha sirta ah ee API-ga read/write ee deegaannada wax-soo-saarka dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda ee caadiga ah ee loo isticmaalo haddii mid kale uusan jirin. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: “Folder”-ka ay lagu kaydin doono xargaha qoraalkaaga, tusaale ahaan URL-ka boggaaga. Akhri wax dheeraad ah oo ku saabsan asaladaha halkan.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuuro client adigoo adeegsanaya furayaasha API-ga ee hore. Tusaale ahaan, abuuro feyl 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 otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Samaynta client-ka fayl gooni ah waxay ka dhigaysaa mid sahlan in mar dambe dib loo isticmaalo. Hadda, anagoo adeegsanayna fayl gaarka ah /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, fadlan balaadhi qeexidda adigoo ku daraya sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4aad: Hirgelinta soo saarista dhinaca server-ka

TacoTranslate wuxuu oggolaanayaa soo-bandhigid dhinaca server-ka ah ee turjumaadahaaga. Tani si weyn ayay u wanaajisaa khibradda isticmaale iyadoo isla markiiba soo bandhigaysa waxa la turjumay, halkii marka hore laga arkilahaa muuqaal kooban oo qoraal aan la turjumin. Intaa waxaa dheer, waxaan ka dhaafi karnaa codsiyo shabakadeed oo dhinaca macmiilka ah, maadaama aan hore u hayno dhammaan turjumaadaha aan u baahanahay.

Waxaan ku bilaabi doonaa abuuridda ama wax ka beddelidda /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 qaabeyntaada. Haddii true, TacoTranslate waxay soo bandhigi doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaan maxalli ah, tijaabo, ama staging (isProduction is false), waxaanu isticmaali doonaa furaha sirta ah ee API-ga read/write si loo hubiyo in xadhkaha cusub loo diro turjumaad.

Illaa hadda, waxaan kaliya u dejinay codsiga Next.js liiska luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa midkood getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Howlahan waxay qaataan saddex dood: mid shay ah oo ah Next.js Static Props Context, qaabeynta TacoTranslate, iyo hanti ikhtiyaari ah oo Next.js ah. Ogow in revalidate ee ku jira getTacoTranslateStaticProps asal ahaan loo dejiyey 60, si tarjumaadahaagu u sii ahaadaan kuwo casri ah.

Si midkood loogu isticmaalo bog, aynu u qaadanno inaad haysato 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 awood u yeelataa inaad isticmaasho qaybta Translate si aad u turjunto xadhigyada ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Hirgeli oo tijaabi!

Waan dhamaynay! Codsigaaga Next.js hadda si otomaatig ah ayaa loo turjumi doonaa marka aad ku darto xargo kasta qaybta Translate. Fiiro gaar ah: kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ayaa awood u yeelan doona inay abuuraan xargo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah (staging) halkaas oo aad ku tijaabin karto codsigaaga soo-saarka (production) adigoo isticmaalaya furaha API-ga noocaas, kuna daraya xargo cusub ka hor intaadan hawlgelin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga qarsoon ee API-ga, isla markaana ay ka hortagto in mashruucaaga turjumaadda uu buuxsamo xargo cusub oo aan xiriir la 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!