Suluhisho bora la utekelezaji wa kimataifa (i18n) katika programu za Next.js

Jinsi inavyofanya kazi

Kadiri dunia inavyokuwa ya kimataifa zaidi, ni muhimu zaidi kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Moja ya njia muhimu za kufanikisha hili ni kupitia uanzishwaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha, sarafu, na miundo ya tarehe tofauti.

Katika mafunzo haya, tutachunguza jinsi ya kuongeza uanzishwaji wa kimataifa kwenye programu yako ya React Next.js, kwa utayarishaji upande wa seva. TL;DR: Angalia mfano kamili hapa.

Mwongozo huu ni kwa programu za Next.js zinazotumia Pages Router.
Ikiwa unatumia App Router, tafadhali tazama mwongozo huu badala yake.

Hatua 1: Sakinisha maktaba ya i18n

Ili kutekeleza utekelezaji wa kimataifa (internationalization) katika programu yako ya Next.js, kwanza tutachagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, ikiwemo next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri maandishi yako kwa lugha yoyote moja kwa moja kwa kutumia AI ya kisasa, na inakuondolea mzigo wa kusimamia faili za JSON.

Sakinisha kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate.

Sasa kwa kuwa umeweka moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na haina kuhitaji kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, unda mradi, kisha nenda kwenye kichupo cha funguo za API. Unda ufunguo mmoja read, na ufunguo mmoja read/write. Tutawahifadhi kama vigezo vya mazingira. Ufunguo wa read ndio tunaouita public, na ufunguo wa read/write ndio secret. Kwa mfano, unaweza kuziongeza kwenye faili .env katika mizizi ya mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha ufunguo wa siri read/write wa API hauvuji kwa mazingira ya uzalishaji upande wa mteja.

Pia tutaongeza vigezo viwili zaidi vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo-msingi la lugha utakaotumika kama mbadala. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Saraka" ambapo nyuzi zako zitatunzwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu vyanzo hapa.

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

Hatua ya 3: Kusanidi TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja ukitumia funguo za API ulizotengeneza hapo awali. Kwa mfano, tengeneza faili inayoitwa /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;

Tutabainisha kiotomatiki TACOTRANSLATE_API_KEY hivi karibuni.

Kuweka mteja katika faili tofauti kunafanya iwe rahisi kutumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx maalum, tutaongeza mtoa huduma wa 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>
	);
}

Ikiwa tayari una pageProps na _app.tsx, tafadhali panua ufafanuzi kwa sifa na msimbo vilivyotajwa hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu uwasilishaji wa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa kwanza. Zaidi ya hayo, tunaweza kuepuka ombi za mtandao kwa upande wa mteja, kwa sababu tayari tunazo tafsiri zote tunazohitaji.

Tutaanza kwa kuunda au kubadilisha /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'),
	});
};

Badilisha ukaguzi wa isProduction ili ufaa kwa usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Iwapo tuko katika mazingira ya ndani, ya majaribio, au ya maandalizi (isProduction is false), tutatumia funguo ya siri ya API ya read/write ili kuhakikisha kamba za maandishi mpya zinatumwa kwa tafsiri.

Hadi sasa, tumeweka programu ya Next.js tu pamoja na orodha ya lugha zinazoungwa mkono. Kitu kinachofuata tutakachofanya ni kupata tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Kazi hizi zinachukua vigezo vitatu: kitu kimoja cha Next.js Static Props Context, usanidi wa TacoTranslate, na vigezo vingine vya Next.js vya hiari. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imewekwa kuwa 60 kwa chaguo-msingi, ili tafsiri zako zibaki za kisasa.

Ili kutumia moja ya kazi hizi kwenye ukurasa, tuseme una faili ya ukurasa kama /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!"/>;
}

Sasa unapaswa kuwa na uwezo wa kutumia komponenti ya Translate kutafsiri maandishi ndani ya vipengele vyote vya React vyako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Weka kwenye uzalishaji na jaribu!

Tayari! Programu yako ya Next.js sasa itatafsiriwa kiotomatiki unapoongeza maandishi yoyote kwenye komponenti ya Translate. Kumbuka kwamba mazingira pekee yenye ruhusa za read/write kwenye ufunguo wa API ndizo zitakazoweza kuunda maandishi mapya yatakayotarajiwa kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na yaliyohifadhiwa salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API wa aina hiyo, ukiongeza maandishi mapya kabla ya kuingia mtandaoni. Hii itazuia mtu yeyote mtu yeyote kuiba ufunguo wako wa siri wa API, na inaweza kuongeza ukubwa wa mradi wako wa tafsiri kwa kuingiza maandishi mapya yasiyohusiana.

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!