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

Sida ay u shaqeyso

Marka adduunku sii yeesho isdhexgal caalami ah, waxaa sii kordhaya muhiimadda ay leedahay in horumariyayaasha webka ay sameeyaan codsiyo u adeegaya isticmaaleyaasha ka kala yimaada dalal iyo dhaqamo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa iyada oo loo maro internationalization (i18n), taas oo kuu oggolaanaysa inaad codsigaaga u habeyso luqado, lacago, iyo qaabab taariikheed kala duwan.

Casharkan, waxaan ka wada hadli doonnaa sida aad ugu dari karto internationalization codsigaaga React Next.js, adigoo adeegsanaya server side rendering. TL;DR: Halkan ka eeg tusaalaha buuxa.

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagehan bedelkeeda.

Tallaabada 1: Ku rakib maktabad i18n ah

Si loo hirgeliyo caalamiyeynta (internationalization) ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n ah. Waxaa jira maktabado caan ah oo dhowr ah, oo ay ku jirto next-intl. Si kastaba ha ahaatee, tusaalahan, waxaan isticmaaleynaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u tarjumaa xarafkaaga luqad kasta iyadoo la adeegsanayo AI casri ah, wuxuuna kaa xoreynayaa maaraynta daalaysa ee faylasha JSON.

Aan ku rakibno adigoo adeegsanaya npm ee terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Samee akoon bilaash ah oo TacoTranslate ah

Hadda oo aad rakibtay module-ka, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumid, iyo furayaasha API-ga la xiriira. Halkan ka samee akoon. Waa bilaash, waxaana aadan u baahnayn inaad ku darto kaarka deynta.

Gudaha UI-ga codsiga TacoTranslate, samee mashruuc, kuna soco tabka furayaasha API-ga. Samee hal furaha read ah, iyo hal furaha read/write ah. Waxaan ku kaydin doonaa sida beddelayaasha deegaanka (environment variables). 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

Hubso inaadan waligaa sirta ah read/write furaha API-ga u sii daynin jawiga wax-soo-saarka dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa laba beddelayaal deegaan oo dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda asalka ah ee la isticmaalo marka luqad kale aysan helin tarjumaad. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: "Folder"-ka meesha xarriiqyadaada lagu kaydin doono, sida URL-ka website-kaaga. Halkan ka akhriso wixii dheeraad ah ee ku saabsan asalka.

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

Tallaabada 3: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhex geliso codsigaaga, waa inaad abuurtaa client adoo 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;

Waxaan si toos ah u qeexi doonnaa TACOTRANSLATE_API_KEY dhawaan.

Abuurista macaamiisha fayl gooni ah waxay ka dhigeysaa mid sahlan in mar kale la isticmaalo mustaqbalka. Hadda, iyadoo la adeegsanayo /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 horay u leedahay pageProps iyo _app.tsx, fadlan ballaadhi qeexiddooda adigoo isticmaalaya hantida iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta server side rendering

TacoTranslate wuxuu kuu oggolaanayaa in tarjumaadahaaga lagu soo bandhigo dhinaca server-ka. Tani si weyn ayay u hagaajisaa khibrada isticmaalaha iyadoo si degdeg ah loo tusayo macluumaadka la turjumay, halkii hore laga arki lahaa wax kooban oo aan la turjumin marka hore. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macaamiisha, sababtoo ah waxaan horay u haynaa dhammaan tarjumaadaha aan u baahanahay.

Waxaan ku bilaabi doonaa abuurista 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 bedel jeeg isProduction si aad ugu habboonaato qaabkaaga. Haddii true, TacoTranslate waxay dusha ka saari doontaa muhiimka ah API dadweynaha. Hadaynu ku jirno goob maxali ah, tijaabo, ama jawi goob-socodka (isProduction is false), waxaanu isticmaali doonaa furaha sirta read/write API si loo hubiyo in xadhig cusub loo diro si loo turjumo.

Ilaa hadda, waxaan kaliya ku dejinay codsiga Next.js liiska luqadaha la taageeray. Waxa xiga ee aan samayn doono waa inaan soo qaadanno turjumaadaha boggagaaga oo dhan. Si tan loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Funkshannadani waxay qaataan seddex doodood: Hal shay oo ah Next.js Static Props Context, qaabeynta TacoTranslate, iyo sifooyin ikhtiyaari ah oo Next.js ah. Ogoow in revalidate ee ku jira getTacoTranslateStaticProps uu si caadi ah ugu dejisan yahay 60, si turjumaadahaagu had iyo jeer u ahaadaan kuwo casri ah.

Si aad u isticmaasho mid kasta oo ka mid ah funkshannadan bogga, aynu qiyaasno inaad haysato 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 waa inaad awoodo inaad isticmaasho qaybta Translate si aad u turjunto xarfo ku jira dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Talaabada 5: Soo deji oo tijaabi!

Waan dhamaynay! Hadda codsigaaga Next.js si toos ah ayaa loo turjumi doonaa markaad wax kasta oo xarfo ah ku darto Translate qaybta. Ogoow in kaliya deegaanada leh rukhsadaha read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xarfo cusub oo la turjumo. Waxaan kuu soo jeedinaynaa inaad yeelato deegaan xirran oo amaan ah oo aad ku tijaabiso codsigaaga wax-soo-saarka iyadoo la adeegsanayo fure API sidan oo kale ah, adigoo ku daraya xarfo cusub kahor intaadan si rasmi ah u daabicin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, isla markaana aysan mashruucaaga turjumaada ku buuxin xarfo 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!