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

Sida ay u shaqeyso

Marka adduunku sii noqdo mid caalami ah, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyayaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala yimid dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee lagu gaari karo tan waa iyada oo la adeegsanayo caalamiyeynta (i18n), taasoo kuu ogolaanaysa inaad u habayn karto codsigaaga luqado kala duwan, lacagaha, iyo qaababka taariikhda.

Casharkan, waxaan ku eegi doonaa sida loo daro caalamiyeynta (i18n) codsigaaga React Next.js, iyadoo la isticmaalayo soo-saarista dhinaca server-ka. TL;DR: Halkan ka eeg tusaalaha buuxa.

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 uga hirgeliso caalamiyeynta codsigaaga Next.js, marka hore waxaan dooran doonnaa maktabad i18n. Waxaa jira dhowr maktabad oo caan ah, oo ay ku jiraan next-intl. Si kastaba ha noqotee, tusaalahan, waxaan u adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu xargahaaga ugu turjumaa luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreynayaa maaraynta daalka leh ee faylasha JSON.

Aan ku rakibno adoo isticmaalaya npm terminal-kaaga:

npm install tacotranslate

Step 2: Abuur xisaab 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 diiwaangeli. Waa bilaash, waxaana lagu weydiin maayo inaad kaarka deynta geliso.

Gudaha UI-ga TacoTranslate, abuuro 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/write waa secret. Tusaale ahaan, waxaad ku dari kartaa iyaga faylka .env ee xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubi inaadan waligaa furaha API-ga sirta ah read/write ku daadinin deegaanada wax-soo-saarka dhinaca macmiilka.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka deegaanka (locale) ee caadiga ah ee dib-u-laabashada (fallback). Tusaalahan, waxaan u dejin doonaa en luqadda Ingiriisiga.
• TACOTRANSLATE_ORIGIN: “Folder”-ka meesha qoraalladaada lagu kaydin doono, sida URL-ka boggaaga. Akhri wax dheeraad ah oo ku saabsan asalka 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 isticmaalaya furayaasha API-ga ee hore. 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 dhawaan.

Inaad macmiilka ku abuurto fayl gooni ah waxay ka dhigaysaa in mar dambe si sahlan loo isticmaali karo. Hadda, anagoo isticmaalayna fayl gaar 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 guryaha iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate waxay oggolaanaysaa in turjumaadahaaga lagu soo bandhigo dhinaca server-ka (server-side rendering). Tani waxay si weyn u hagaajinaysaa khibrada isticmaalaha, maadaama ay macluumaadka la turjumay muujinayso isla markiiba, halkii ay jiri lahayd muuqaal kooban oo muujinaya wax aan la turjumin marka hore. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macaamiisha, maadaama horeyba aanu u haysanno 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'),
	});
};

Beddel hubinta isProduction si ay ugu habboonaato 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 adeegsan doonaa furaha API-ga qarsoon ee read/write si loo hubiyo in xarigyo 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 mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahan waxay qaataan saddex dood: hal Next.js Static Props Context shay, qaabeynta TacoTranslate, iyo guryaha Next.js ee ikhtiyaariga ah. Ogsoonow in revalidate ee getTacoTranslateStaticProps si caadi ah loo dejiyey 60, si tarjumaadahaaga ay u sii ahaadaan kuwo la cusbooneysiiyay.

Si aad midkood ugu isticmaasho bog, aynu 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 yeelataa inaad isticmaasho qaybta Translate si aad u tarjumto qoraallada 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 turjumayaa markaad qoraal kasta ku darto qaybta Translate. Ogow in kaliya deegaanada haysta oggolaanshaha read/write ee furaha API-ga ay awood u yeelan doonaan inay abuuraan qoraallo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaan ah si aad ugu tijaabiso codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, kuna daraya qoraallo cusub ka hor inta aadan si toos ah u gelin. Tani waxay ka hortagi doontaa in qofna qofna uu xado furahaaga API-ga sirta ah, isla markaana ay ka hortagi karto in mashruucaaga turjumaadda uu buuxsamo ama uu bararo sababo la xiriira in la daro 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!