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

Wakati dunia inavyozidi kuwa ya kimataifa, inazidi kuwa muhimu kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Moja ya njia muhimu za kufanikisha hili ni kupitia utekelezaji wa kimataifa (internationalization, i18n), ambao unakuwezesha kurekebisha programu yako kwa lugha tofauti, sarafu mbalimbali, na fomati za tarehe.

Katika mwongozo huu, tutachunguza jinsi ya kuongeza internationalization kwenye programu yako ya React Next.js, na utolewaji upande wa seva. TL;DR: Tazama mfano kamili hapa.

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

Hatua ya 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, zikiwemo next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri kiotomatiki stringi zako kwa lugha yoyote kwa kutumia AI ya kisasa kabisa, na inakuondolea kazi ya kuchosha ya kusimamia faili za JSON.

Wacha tuiweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya TacoTranslate ya bure

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

Ndani ya UI ya programu ya TacoTranslate, unda mradi, kisha nenda kwenye kichupo cha funguo za API. Tengeneza ufunguo mmoja read na ufunguo mmoja read/write. Tutayahifadhi 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 kufichua funguo ya API ya siri read/write kwa mazingira ya uzalishaji upande wa mteja.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo (locale) wa chaguo-msingi utakaotumika kama nafasi mbadala. Katika mfano huu, tutaweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “Folda” ambako stringi zako 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 kwa kutumia funguo za API ulizopata hapo awali. Kwa mfano, unda 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;

Tutabainisha kwa otomatiki TACOTRANSLATE_API_KEY hivi punde.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, tukitumia /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 huo kwa vigezo na msimbo vilivyotajwa hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu uonyeshaji wa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonyesha kwa muda mfupi maudhui ambayo hayajatafsiriwa kwanza. 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 uendane na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, ya mtihani, au ya maandalizi (isProduction is false), tutatumia ufunguo wa siri wa API read/write ili kuhakikisha mistari mipya imetumwa kwa tafsiri.

Mpaka sasa, tumeweka programu ya Next.js tu na orodha ya lugha zinazounga mkono. Hatua inayofuata ni kupata tafsiri za kurasa zako zote. Kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Funsi hizi zinachukua vigezo vitatu: moja objekti ya Next.js Static Props Context, usanidi wa TacoTranslate, na vigezo vingine vya hiari vya Next.js. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imewekwa kwa 60 kwa chaguo-msingi, ili tafsiri zako ziendelee kuwa za kisasa.

Ili kutumia yeyote kati ya hizi kwenye ukurasa, tukubalie 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 unaweza kutumia kipengele Translate kutafsiri mfuatano wa herufi katika vipengele vyote vya React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Zindua na ujaribu!

Tumeisha! Programu yako ya React sasa itatafsirishwa moja kwa moja unapoongeza maandishi yoyote kwenye komponenti ya Translate. Kumbuka kwamba mazingira pekee yenye ruhusa za read/write kwenye ufunguo wa API ndio yataweza kuunda maandishi mapya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya kujaribu (staging) yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API wa aina hiyo, ukiongeza maandishi mapya kabla ya kwenda mtandaoni. Hii itazuia mtu yeyote mtu yeyote kuiba ufunguo wako wa API wa siri, na kwa uwezekano kusababisha mradi wako wa tafsiri kujaa kwa kuongeza maandishi mapya yasiyohusiana.

Hakikisha uangalie mfano kamili kwenye wasifu wetu wa GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hili kwa kutumia App Router! Ikiwa utakutana na matatizo yoyote, jisikie huru kutufikia, na tutafurahi sana kusaidia.

TacoTranslate inakuwezesha ku-localize programu zako za React kiotomatiki na haraka kwa zaidi ya lugha 75. Anza leo!