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

Jinsi inavyofanya kazi

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

Katika mwongozo huu, tutachunguza jinsi ya kuongeza uwezeshaji wa kimataifa kwenye programu yako ya React Next.js, pamoja na upachikaji 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 angalia mwongozo huu badala yake.

Hatua 1: Sakinisha maktaba ya i18n

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

TacoTranslate inatafsiri moja kwa moja maandishi yako kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea usimamizi wa kuchosha wa faili za JSON.

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 haina kuhitaji kuongeza kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, unda mradi, na nenda kwenye kichupo chake cha API keys. Tengeneza ufunguo mmoja read na ufunguo mwingine read/write. Tutazihifadhi kama vigezo vya mazingira. Ufunguo read ndio tunaoita 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 hauwahi kuvuja ufunguo wa API wa siri read/write kwa mazingira ya uzalishaji upande wa mteja.

Pia tutaongeza vigezo viwili vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo la chaguo-msingi la kurudisha (fallback). Katika mfano huu, tutaliweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: Kabrasha ambapo mifungu yako ya maandishi itahifadhiwa, 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;

Tutakuwa tukibainisha kiotomatiki TACOTRANSLATE_API_KEY hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuutumia 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 maalum, tafadhali panua ufafanuzi kwa kuingiza mali na msimbo yaliyotajwa hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu uonyeshaji wa tafsiri zako upande wa seva. Hii inaboresha uzoefu wa mtumiaji kwa kiasi kikubwa kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa mwanzoni. Zaidi ya hayo, tunaweza kuepuka maombi ya mtandao kwenye mteja, kwa sababu tayari tuna 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 ulingane na usanidi wako. Ikiwa true, TacoTranslate itaweka wazi funguo ya API ya umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya staging (isProduction is false), tutatumia funguo la API la siri read/write ili kuhakikisha kwamba mfuatano mpya wa maandishi unatumwa kwa tafsiri.

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

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

Ili kutumia moja ya funsi 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 kamba za maandishi ndani ya vipengele vyote vya React vyako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Zindua na jaribu!

Tumemaliza! Programu yako ya Next.js sasa itatafsiriwa kwa otomatiki unapoongeza maandishi yoyote kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye funguo za API pekee yataweza kuunda maandishi mapya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukiwa na funguo ya API kama hiyo, ukiongeza maandishi mapya kabla ya kuingia mtandaoni. Hii itaizuia mtu yeyote mtu yeyote kuiba funguo yako ya siri ya API, na kuzuia uwezekano wa kupanua 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!