Jinsi ya kutekeleza utafsiri wa kimataifa katika programu ya Next.js inayotumia Pages Router

Kadiri dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa watengenezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia kuu za kufanikisha hili ni kupitia uanzishwaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.

Kwenye mafunzo haya, tutajifunza jinsi ya kuongeza uanzishwaji wa kimataifa kwenye programu yako ya React Next.js, ikitumia upakiaji wa upande wa seva. TL;DR: Tazama mfano kamili hapa.

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

Hatua 1: Sakinisha maktaba ya i18n

Ili kuwezesha matumizi kwa lugha nyingi katika programu yako ya Next.js, tutaanza kwa kuchagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, zikiwemo next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri kiotomatiki maandishi yako hadi lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea mzigo wa kusimamia faili za JSON.

Tusakinishe kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya TacoTranslate ya bure

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

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, kisha nenda kwenye kichupo cha API keys zake. Tengeneza ufunguo mmoja wa read na mwingine wa read/write. Tutayahifadhi kama mabadiliko ya mazingira. Ufunguo wa read ndio tunaouita public na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuyaongeza kwenye faili la .env kwenye mizizi ya mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha haujawahi kufunua funguo ya API ya siri read/write katika mazingira ya uzalishaji ya upande wa mteja.

Pia tutaongeza mabadiliko ya mazingira mawili zaidi: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa locale ya chaguo-msingi. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “folda” 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 ulizozitengeneza 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;

Tutaiweka kiotomatiki 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>
	);
}

Kama tayari una pageProps na _app.tsx maalum, tafadhali ongeza ufafanuzi kwa mali na msimbo ulio hapo juu.

Hatua ya 4: Kutekeleza uwasilishaji upande wa seva

TacoTranslate inaruhusu kuonyeshwa kwa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya maudhui yasiyotafsiriwa kuonekana kwa muda mfupi kwanza. Zaidi ya hayo, tunaweza kuepuka maombi ya mtandao kwa upande wa mteja, kwa sababu tayari tunazo tafsiri zote tunazohitaji.

Tutaanza kwa kuunda au kuhariri /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, tumepanga programu ya Next.js kwa kuainisha tu 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 vigezo vitatu: Moja ni kitu cha Next.js Static Props Context, usanidi wa TacoTranslate, na vigezo 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 yoyote ya kazi hizi kwenye ukurasa, tuchukue kuwa 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 maandishi ndani ya komponenti zako zote za React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na ujaribu!

Tumemaliza! Programu yako ya React sasa itatafsiriwa kwa otomatiki unapoongeza maandishi yoyote kwenye komponenti ya Translate. Kumbuka kwamba ni mazingira pekee yenye ruhusa za read/write kwenye ufunguo wa API yataweza kuunda maandishi mapya yanayoweza kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukitumia ufunguo wa API kama huo, ukiongeza maandishi mapya kabla ya kwenda mtandaoni. Hii itawazuia mtu yeyote mtu yeyote kuiba ufunguo wako wa siri wa API, na pia inaweza kuzuia mradi wako wa tafsiri kupanuka kwa kuongeza maandishi mapya yasiyohusiana.

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

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