Jinsi ya kutekeleza utafsiri wa lugha nyingi 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. Njia moja muhimu ya kufanikisha hili ni kupitia ukuzaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha, sarafu, na muundo wa tarehe tofauti.

Kwenye mafunzo haya, tutachunguza jinsi ya kuongeza ukuzaji wa kimataifa kwenye programu yako ya React Next.js, kwa kutumia server side rendering. TL;DR: Tazama mfano kamili hapa.

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

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utafsiri wa kimataifa 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 moja kwa moja mistari yako kwenda lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea usumbufu wa kusimamia faili za JSON.

Acha tuiweke tukitumia npm katika terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa ambapo umeweka moduli hii, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na hainahitaji uongeze kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na utafuate kwenye kichupo cha funguo za API. Tengeneza ufunguo mmoja read, na ufunguo mmoja read/write. Tutahifadhi kama vigezo vya mazingira. Ufunguo wa read ni kile tunachokiita public na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuziongeza kwenye faili ya .env inayopatikana katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha usitumie kufichua siri ya ufunguo wa API wa read/write kwa mazingira ya uzalishaji upande wa mteja.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Nambari ya eneo la kiasili ya chaguo-msingi. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" ambapo tamati zako zitahifadhiwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.

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

Kipindi cha 3: Kuweka TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja kwa kutumia funguo za API ulizozipata hapo awali. Kwa mfano, tengeneza 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 tunafanya uamuzi wa moja kwa moja wa TACOTRANSLATE_API_KEY hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kutumia tena baadaye. Sasa, tukitumia /pages/_app.tsx ya kawaida, tutaongeza mtoaji 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 za maalum, tafadhali panua ufafanuzi kwa mali na msimbo kutoka hapo juu.

Hatua ya 4: Kutekeleza uonyesho wa upande wa seva

TacoTranslate huruhusu uonyesho wa sehemu ya seva wa tafsiri zako. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonyesha maudhui yasiyotafsiriwa kwanza kwa muda mfupi. Zaidi ya hayo, tunaweza kuepuka 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.

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

Hizi kazi zinachukua hoja tatu: Kifaa 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 kawaida, ili tafsiri zako ziendelee kuwa za kisasa.

Kutumia mojawapo ya kazi hizi kwenye ukurasa, tuseme una faili la 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 mitembeleo ndani ya sehemu zote za React zako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na jaribu!

Tumemaliza! Programu yako ya React sasa itatafsiriwa kiotomatiki unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kwamba ni mazingira tu yenye ruhusa za read/write kwenye funguo za API ndio yatakayoweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyo fungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukitumia funguo za API kama hizo, ukiongeza mistari mipya kabla ya kuitoa kwa umma. Hii itazuia mtu yeyote kuiba funguo zako za siri za API, na pia kuzuia kukua kupita kiasi kwa mradi wako wa tafsiri kwa kuongeza mistari mipya isiyohusiana.

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

TacoTranslate inakuwezesha kuweka programu zako za React katika lugha tofauti moja kwa moja na kwa haraka kutoka na kwenda lugha yoyote. Anza leo!