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

Jinsi inavyofanya kazi

Kadiri dunia inavyokuwa ya kimataifa zaidi, inazidi kuwa muhimu kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Njia moja muhimu ya kufanikisha hili ni kupitia internationalization (i18n), ambayo inakuwezesha kuibadilisha programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.

Katika mafunzo haya, tutaeleza jinsi ya kuongeza internationalization kwenye programu yako ya React Next.js, pamoja na utayarishaji upande wa seva. TL;DR: Tazama 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 uenezaji wa lugha (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 hufasiri moja kwa moja maneno (strings) yako kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea mzigo wa kusimamia faili za JSON zinazochosha.

Tuweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya TacoTranslate ya bure

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 huna haja ya kuongeza kadi ya mkopo.

Ndani ya kiolesura cha programu ya TacoTranslate, unda mradi, kisha nenda kwenye kichupo chake cha funguo za API. Unda ufunguo mmoja read, na ufunguo mmoja read/write. Tutazihifadhi kama vigezo vya mazingira. Ufunguo read ndio tunauita public, na ufunguo read/write ni secret. Kwa mfano, unaweza kuziweka kwenye faili .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauyafichui kamwe ufunguo wa API wa siri read/write katika mazingira ya uzalishaji upande wa mteja.

Tutaongeza pia vigezo vya mazingira viwili: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo la chaguo-msingi (fallback). Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “Folda” ambapo faili zako za maandishi zitatunzwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili 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 ulizotajwa hapo awali. Kwa mfano, tengeneza faili iitwayo /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;

Tutaiweka TACOTRANSLATE_API_KEY kiotomatiki hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, kwa kutumia faili maalum /pages/_app.tsx, 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 huo kwa mali na msimbo kutoka hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu kuonyeshwa kwa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa kwanza. Zaidi ya hayo, tunaweza kuepuka maombi ya mtandao kwenye upande wa mteja, kwa sababu tayari tunayo 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 uendane na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, ya mtihani, au ya staging (isProduction is false), tutatumia ufunguo wa siri wa read/write ili kuhakikisha misemo mipya zinatumwa kwa tafsiri.

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

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

Ili kutumia mojawapo 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 kuweza kutumia sehemu ya Translate kutafsiri maandishi ndani ya komponenti zako zote za React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Weka kwenye uzalishaji na ujaribu!

Tumeisha! Programu yako ya Next.js sasa itatafsiriwa kwa otomatiki unapoongeza maandishi yoyote kwenye komponenti ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye ufunguo wa API pekee ndio yataweza kuunda maandishi mapya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukitumia ufunguo wa API kama huo, ukiongeza maandishi mapya kabla ya kuingia mtandaoni. Hii itaizuia mtu yeyote mtu yeyote kuiba ufunguo wako wa siri wa API, na inaweza kupelekea kuongezeka kwa mradi wako wa tafsiri kwa kuongeza 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!