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

Sida ay u shaqeyso

Marka adduunku sii caalamiyo, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaal ka kala yimid dalal iyo dhaqammo kala duwan. Mid ka mid ah dariiqooyinka muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habayso codsigaaga luqado, lacago, iyo qaababka taariikhda kala duwan.

Casharkan, waxaan sahmin doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo soo bandhigida 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 hagahan halkii.

Tallaabada 1: Ku rakib maktabad i18n

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

TacoTranslate waxay si otomaatig ah u turjumaysaa xarigyadaada luqad kasta iyadoo adeegsanaysa AI casri ah, waxayna kaa xoreysaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno anagoo isticmaalayna npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda oo aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API ee la xidhiidha. Halkan iska diiwaangeli. Waa bilaash, oo uma baahna inaad kaarka deynta ku darto.

Gudaha UI-ga TacoTranslate, abuur mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuur hal read furaha, iyo hal read/write furaha. Waxaan ku keydin doonaa iyaga sida doorsoomayaasha deegaanka. Furaha read waxa aan ugu yeernaa public iyo furaha read/writena 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 furaha sirta ah read/write ee API-ga u shaacinin deegaanka wax-soo-saarka ee dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka locale-ka ee caadiga ah (fallback). Tusaalahan, waxaan u dejin doonaa en luqadda Ingiriisiga.
• TACOTRANSLATE_ORIGIN: “folder”-ka meesha xadhkahaaga lagu kaydin 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 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 si sahlan dib loogu isticmaali karo. 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 u habeysan, fadlan balaadhi qeexiddooda adigoo ku daraya sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta soo-bandhigga dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa in turjumaadahaaga lagu soo bandhigo dhinaca server-ka. Tani si weyn ayay u wanaajinaysaa waayo-aragnimada isticmaalaha, maadaama ay isla markiiba soo bandhigto nuxurka la turjumay, halkii marka hore laga arki lahaa nuxur aan la turjumin. Intaa waxaa sii dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan hore 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'),
	});
};

Wax ka beddel hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true, TacoTranslate waxay muujin doontaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama deegaanka diyaarinta (isProduction is false), waxaanu isticmaali doonaa furaha API-ga qarsoon ee read/write si loo hubiyo in xadhkaha cusub loo diro turjumaad.

Ilaa hadda, waxaan kaliya u dejinay codsiga Next.js liiska luqadaha la taageeray. Tallaabada xigta waa inaan soo qaadnaa tarjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa midkood getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran baahiyahaaga.

Howlahan waxay qaataan saddex dooda: mid Next.js Static Props Context ah, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Ogow in revalidate ee ku saabsan getTacoTranslateStaticProps lagu dejiyey 60 sida caadiga ah, si turjumaadahaagu ay u sii ahaadaan kuwo la cusbooneysiiyey.

Si aad midkood uga isticmaasho bog, aan u qaadanno inaad leedahay 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 yeelan kartaa inaad isticmaasho qaybta Translate si aad u tarjumto xadhkaha qoraalka ee ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waan dhamaynay! Codsigaaga Next.js waxaa hadda si otomaatig ah loogu turjumi doonaa markaad eray kasta ku darto qaybta Translate. Fiiro gaar ah: kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ayaa awood u yeelan doona inay abuuraan erayo cusub oo lagu turjumo. Waxaan ku talineynaa inaad yeelato deegaan tijaabo oo xiran oo amaan ah halkaas oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, isla markaana aad ku dari karto erayo cusub ka hor inta aadan si rasmi ah u hawlgelin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, iyo sidoo kale inay ka ilaaliso mashruucaaga turjumaadda inuu buuxsamo iyadoo la ku darayo erayo cusub oo aan khuseyn.

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!