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

Sida ay u shaqeyso

Iyada oo dunidu sii caalamiyeeyso, waxay sii muhiim noqonaysaa in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala yimid dalal iyo dhaqammo kala duwan. Mid ka mid ah hababka ugu muhiimsan ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habeyso codsigaaga luqado kala duwan, lacagaha, iyo qaababka taariikhda.

Casharkan, waxaanu sahamin doonaa sida loo daro caalamiyeynta codsigaaga React Next.js, iyadoo la adeegsanayo soo saarista 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 bedelkeeda.

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 maktabad 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 xarigyadaada (strings) luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreynayaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno adoo adeegsanaya 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-ga ee la xiriira. Abuur akoon halkan. Waa bilaash, mana ku baahnid inaad ku darto kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuro mashruuc, kadibna u gudub taba furayaasha API-ga. Create one read key, and one read/write key. Waxaan ku keydin doonaa 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 furaha API-ga sirta ah read/write u sii dayn deegaannada wax-soo-saarka ee dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa labada doorsoome ee deegaanka: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka deegaanka ee caadiga ah ee lagu laabto. Tusaalahan, waxaan u dejin doonaa en (Ingiriisi).
• TACOTRANSLATE_ORIGIN: “folder”-ka meesha xargahaaga lagu keydin doono, tusaale ahaan URL-ka mareegtaada. 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 loo abuuray. Tusaale ahaan, samee 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 otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Samaynta client-ka fayl gooni ah waxay ka dhigaysaa in si fudud dib loo isticmaali karo goor dambe. Hadda, anagoo isticmaalayna /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 oo gaar ah, fadlan ballaari qeexidda adigoo ku daraya sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa soo-saarista turjumaadahaaga dhinaca server-ka. Tani si weyn ayay u hagaajisaa waayo-aragnimada isticmaalaha iyadoo isla markiiba la soo bandhigayo nuxurka la turjumay, halkii marka hore laga arki lahaa muuqaallo gaagaaban oo aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, maadaama aan horey u haysanno dhammaan turjumaadaha aan u baahanahay.

Waxaan ku bilaabi doonaa inaan abuurno ama aan 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 wuxuu soo bandhigi doonaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabada, ama marxaladda tijaabinta (staging) (isProduction is false), waxaanu isticmaali doonaa furaha API-ga sirta ah ee read/write si loo hubiyo in xadhigyo cusub loo diro turjumidda.

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

Hawlahan waxay qaataan saddex dood: Hal walax oo ah Next.js Static Props Context, qaabeynta TacoTranslate, iyo guryaha Next.js ee ikhtiyaariga ah. Ogow in revalidate ee getTacoTranslateStaticProps lagu dejiyey 60 si caadi ah, si turjumaadahaagu u sii ahaadaan kuwo la cusbooneysiiyay.

Si aad midkood ugu isticmaasho bog, aan 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 leedahay inaad isticmaasho qaybta Translate si aad u tarjumto xadhigyada gudaha dhammaan qaybaha React-kaaga.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waa la dhammeystay! Barnaamijkaaga Next.js hadda si otomaatig ah ayaa loo turjumi doonaa markaad ku darto xargaha kasta qaybta Translate. Ogsoonow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xargaha cusub ee la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo ammaansan (staging) halkaas oo aad ku tijaabin karto barnaamijkaaga wax-soo-saarka adigoo adeegsanaya furaha API-ga noocaas ah, kuna daraya xargaha cusub ka hor inta aadan si rasmi ah u hawlgelin. Tani waxay ka hortagi doontaa in qofna uu xado furahaaga qarsoon ee API-ga, sidoo kalena waxay ka hortagi doontaa in mashruucaaga turjumaadda uu buuxsamo xargaha cusub ee 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!