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. 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 zinazotumia Pages Router.
Ikiwa unatumia App Router, tafadhali angalia mwongozo huu badala yake.

Hatua 1: Sakinisha maktaba ya i18n

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

TacoTranslate hutafsiri maandishi yako moja kwa moja kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuokoa kutoka kwa kazi ya kuchosha ya kusimamia faili za JSON.

Tuweke kwa kutumia npm kwenye terminal 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 hauhitaji kuongeza kadi ya mkopo.

Ndani ya kiolesura cha programu ya TacoTranslate, unda mradi, na nenda kwenye kichupo chake cha funguo za API. Tengeneza ufunguo mmoja read, na ufunguo mmoja read/write. Tutahifadhi hizo kama vigezo vya mazingira. Ufunguo wa read ndiyo tunaoita public, na ufunguo wa 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 usifichue kamwe ufunguo wa API wa siri read/write kwa mazingira ya uzalishaji ya upande wa mteja.

Pia tutaongeza vigezo viwili vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo la lugha la chaguo (fallback). Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “folder” ambapo maandishi yako yatahifadhiwa, 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 ukitumia funguo za API kutoka 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;

Tutaiweka kiotomatiki TACOTRANSLATE_API_KEY hivi punde.

Kuumba mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx iliyobinafsishwa, 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 mali na msimbo kutoka hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu kuonyeshwa kwa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyokuwa yamefasiriwa mwanzoni. Zaidi ya hayo, tunaweza kuepuka ombi za 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 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. Kitu kitakachofuata ni kuchukua tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Funsi hizi zinapokea hoja tatu: kimoja Next.js Static Props Context kitu, usanidi wa TacoTranslate, na sifa za Next.js za hiari. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imewekwa kuwa 60 kwa chaguo-msingi, ili tafsiri zako ziendelee kuwa za hivi punde.

Ili kutumia mojawapo 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 Translate komponenti kutafsiri nyuzi za maandishi ndani ya vikomponenti vyako 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 unapoongeza mistari yoyote ya maandishi kwenye Translate komponenti. Kumbuka kwamba mazingira pekee yenye ruhusa za read/write kwenye ufunguo wa API ndio yataweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na yaliyo salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API kama huo, ukiongeza mistari mipya kabla ya kuenda mtandaoni. Hii itazuia mtu yeyote kuiba ufunguo wako wa API wa siri, na pia kuzuia mradi wako wa utafsiri kuzidiwa kwa kuongeza mistari mipya zisizohusiana.

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

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