Jinsi ya kutekeleza utafsiri wa kimataifa 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. Njia moja kuu ya kufanikisha hili ni kupitia utaifa wa kimataifa (i18n), ambayo inakuwezesha kubadilisha programu yako kufuata lugha tofauti, sarafu, na fomati za tarehe.

Kwenye mafunzo haya, tutachunguza jinsi ya kuongeza utaifa wa kimataifa kwenye programu yako ya React Next.js, ikiwa na utafsiri upande wa seva (server side rendering). TL;DR: Tazama mfano kamili hapa.

Mwongozo huu ni kwa ajili ya programu za Next.js zinazotumia Pages Router.
Ikiwa unatumia App Router, tafadhali tazama mwongozo huu badala yake.

Kipindi cha 1: Sakinisha maktaba ya i18n

Kutekeleza uanzishaji wa lugha (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 hutafsiri mfululizo wa maneno yako moja kwa moja kwa lugha yoyote kwa kutumia AI ya kisasa, na hukutoa katika usimamizi mgumu wa faili za JSON.

Hebu tuiweke kupitia npm kwenye terminal yako:

npm install tacotranslate

Kipindi cha 2: Unda akaunti ya bure ya TacoTranslate

Sasa kwani umeweka moduli hiyo, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa utafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na haitahitaji kuongeza kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na nenda kwenye kichupo cha API keys zake. Tengeneza key moja ya read na key moja ya read/write. Tutahifadhi hizi kama mabadiliko ya mazingira (environment variables). Key ya read ndiyo tunayoita public na key ya read/write ni secret. Kwa mfano, unaweza kuziingiza kwenye faili la .env kwenye mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauketi siri ya API ya read/write kwa mazingira ya uzalishaji upande wa mteja.

Tutaongeza pia mabadiliko mawili zaidi ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Nambari ya chaguo-msingi ya eneo la kuegemeza. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" ambapo mfuatano wa maandishi yako utawekwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Hatua ya 3: Kuanzisha TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja kwa kutumia funguo za API kutoka awali. Kwa mfano, unda faili lenye jina /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 tukitumia moja kwa moja kuainisha TACOTRANSLATE_API_KEY hivi punde.

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 za desturi, tafadhali ongeza ufafanuzi na mali pamoja na msimbo kutoka juu.

Hatua ya 4: Kutekeleza uchoraji upande wa seva

TacoTranslate inaruhusu upigaji picha upande wa seva wa tafsiri zako. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha yaliyotafsiriwa mara moja, badala ya mwanga wa haraka wa yaliyosalia bila kutafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka 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'),
	});
};

Rekebisha ukaguzi wa isProduction ili kuendana na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API ya umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya jukwaa (isProduction is false), tutatumia kitufe cha siri read/write API ili kuhakikisha kuwa mifuatano mipya inatumwa kwa tafsiri.

Hadi sasa, tumetayarisha tu programu ya Next.js na orodha ya lugha zinazoungwa mkono. Kitu kingine tutakachofanya ni kutoa tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Funguo 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 default, ili tafsiri zako ziendelee kuwa za kisasa.

Ili kutumia moja ya funguo hizi katika ukurasa, tufikirie 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 sehemu ya Translate kutafsiri mistringi ndani ya vipengele vyote vya React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Weka kwenye mtandao na jaribu!

Tumemaliza! Programu yako ya React sasa itatafsiriwa kiotomatiki wakati utaongeza mfululizo wowote wa maneno kwenye sehemu ya Translate. Kumbuka kwamba ni mazingira tu yenye ruhusa za read/write kwenye API key ndio yataweza kuunda mfululizo mpya wa maneno ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukiwa na API key kama hiyo, ukiongeza mfululizo mpya wa maneno kabla ya kwenda moja kwa moja. Hii itazuia mtu yeyote kuiba API key yako ya siri, na pengine kuja kuongeza mzigo wa maneno yasiyo husiana kwenye mradi wako wa tafsiri.

Hakikisha kuangalia mfano kamili kwenye wasifu wetu wa GitHub. Hapo, pia utapata mfano wa jinsi ya kufanya hivyo ukitumia App Router! Ikiwa utakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.

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