Jinsi ya kutekeleza msaada wa lugha nyingi katika programu ya Next.js inayotumia Pages Router

Wakati dunia inavyozidi kuwa ya kimataifa, 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 uboreshaji wa kimataifa (i18n), ambao unakuwezesha kurekebisha programu yako kwa lugha mbalimbali, sarafu, na miundo tofauti ya tarehe.

Katika mwongozo huu, tutaangazia jinsi ya kuongeza uboreshaji wa kimataifa (i18n) kwenye programu yako ya React Next.js, pamoja na uonyeshaji wa upande wa seva. TL;DR: Tazama mfano kamili hapa.

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

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utafsiri wa kimataifa 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 kiotomatiki misemo yako kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea kazi ya kuchosha ya kusimamia faili za JSON.

Tutaisakinisha kwa kutumia npm kwenye terminali yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa baada ya kusakinisha moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na hauitaji kuongeza kadi ya mkopo.

Ndani ya kiolesura cha programu ya TacoTranslate, tengeneza mradi, kisha nenda kwenye kichupo cha funguo za API. Tengeneza funguo moja ya read na funguo moja ya read/write. Tutazihifadhi kama vigezo vya mazingira. Funguo read ndiyo tunayoita public, na funguo 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 kuwa hauwahi kuvuza ufunguo wa API wa siri read/write kwa mazingira ya uzalishaji upande wa mteja.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa locale unaotumika kama chaguo-msingi (fallback). Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “kabrasha” ambako strings zako zitahifadhiwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu origins 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 kwa kutumia funguo za API kutoka 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;

Tutaweka kwa otomatiki TACOTRANSLATE_API_KEY hivi punde.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx iliyobinafsishwa, tutaongeza mtoa huduma 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 zilizobinafsishwa, tafadhali panua ufafanuzi kwa sifa na msimbo kutoka hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu uonyeshaji wa tafsiri zako upande wa seva. Hii inaimarisha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa kwanza. Aidha, tunaweza kuepuka maombi ya mtandao upande wa 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 ufaa kwa usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya staging (isProduction is false), tutatumia ufunguo wa siri read/write wa API ili kuhakikisha maandishi mapya yanatumwa kwa tafsiri.

Hadi sasa, tumeweka tu programu ya Next.js na orodha ya lugha zinazoungwa mkono. Hatua inayofuata ni kupata tafsiri za kurasa zako zote. Ili 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 kwa 60 kwa chaguo-msingi, ili tafsiri zako zibaki za kisasa.

Ili kutumia yoyote ya kazi hizi katika 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 komponenti 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 React sasa itatafsiriwa kiotomatiki unapoongeza nyuzi zozote za maandishi kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye ufunguo wa API pekee ndiyo yataweza kuunda nyuzi mpya za kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API kama huo, ukiongeza nyuzi mpya kabla ya kuingia moja kwa moja kwa watumiaji. Hii itazuia mtu yeyote mtu yeyote kuiba ufunguo wako wa API wa siri, na kuzuia mradi wako wa tafsiri kuzidiwa kwa kuongeza nyuzi mpya zisizohusiana.

Hakikisha kuangalia mfano kamili kwenye profaili yetu ya GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hivi kwa kutumia App Router! Ikiwa utakutana na shida yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.

TacoTranslate inakuwezesha kutafsiri kwa njia ya kiotomatiki programu zako za React haraka kwenda na kutoka katika zaidi ya lugha 75. Anza leo!