Jinsi ya kuwezesha matumizi ya lugha nyingi katika programu ya Next.js inayotumia Pages Router

Wakati ulimwengu unavyoendelea kuwa wa kimataifa, ni muhimu zaidi kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni mbalimbali. Moja ya njia kuu za kufanikisha hili ni kupitia uwezeshaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha tofauti, sarafu, na muundo wa tarehe.

Katika mafunzo haya, tutaangalia jinsi ya kuongeza uwezeshaji wa kimataifa kwenye programu yako ya React Next.js, pamoja na uwasilishaji 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 1: Sakinisha maktaba ya i18n

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

TacoTranslate inatafsiri maandishi yako kiotomatiki hadi lugha yoyote kwa kutumia AI ya kisasa, na inakuokoa kutoka kwa usimamizi wa kuchosha wa faili za JSON.

Wacha tuiweke 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 hauwahi kuvuja 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 zilizo hapo awali. Kwa mfano, unda faili liitwalo /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 TACOTRANSLATE_API_KEY hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia 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 zilizobinafsishwa, tafadhali panua ufafanuzi kwa sifa na msimbo kutoka hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu utayarishaji wa 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 mwanzoni. Zaidi ya hayo, tunaweza kuepuka maombi ya mtandao kwenye 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 majaribio, au ya staging (isProduction is false), tutatumia ufunguo wa siri wa API read/write ili kuhakikisha vifungu vipya vinatumwa kwa tafsiri.

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

Funsi hizi zinachukua vigezo vitatu: objekti moja ya 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 ziendelee kuwa za kisasa.

Ili kutumia mojawapo ya funsi 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 kuwa na uwezo wa kutumia komponenti ya Translate kutafsiri mistari ya maandishi katika vipengele vyote vya 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 wakati utaongeza mfuatano wowote wa herufi kwenye komponenti ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye ufunguo wa API pekee ndiyo yatakayoweza kuunda mfuatano mpya wa herufi kwa ajili ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API kama huo, ukiongeza mfuatano mpya wa herufi kabla ya kupelekwa mtandaoni. Hili litatuzuia mtu yeyote kuiba ufunguo wako wa siri wa API, na huenda likasababisha kupanuka kwa mradi wako wa tafsiri kwa kuongeza mfuatano mipya isiyohusiana.

Hakikisha unatazama mfano kamili kwenye wasifu wetu wa GitHub. Huko pia utapata mfano wa jinsi ya kufanya hivi kwa kutumia App Router! Ikiwa utakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi kusaidia.

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