Jinsi ya kutekeleza uhamishaji lugha katika programu ya Next.js inayotumia Pages Router

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

Kwenye mafunzo haya, tutaangazia jinsi ya kuongeza uanzishaji wa kimataifa kwenye programu yako ya React Next.js, pamoja na utoaji wa maudhui upande wa seva. TL;DR: Tazama mfano kamili hapa.

Mwongozo huu ni kwa ajili ya programu za Next.js zinazotumia Pages Router.
Kama 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, tutachagua kwanza 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 maandishi yako kwa lugha yoyote kwa kutumia AI ya kisasa kabisa, na inakuondolea usumbufu wa kusimamia faili za JSON.

Tuae kwa kutumia npm katika terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa uliyojumuisha moduli hiyo, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Tengeneza akaunti hapa. Ni bure, na hahitaji uingizaji wa kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na uende kwenye kichupo cha API keys zake. Tengeneza ufunguo mmoja read, na ufunguo mmoja read/write. Tutayahifadhi kama mabadiliko ya mazingira. Ufunguo wa read ni kile tunachokitaja kama public, na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuyaongeza kwenye faili ya .env kwenye mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauwezi kuwahi kufichua siri ya API key ya 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: Msimbo wa eneo la chaguo-msingi la kurudi nyuma. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folder" ambapo mistari yako itahifadhiwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.

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

Hatua ya 3: Kuweka TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja ukitumia API keys kutoka awali. Kwa mfano, unda faili yenye 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 tunataja kiotomatiki TACOTRANSLATE_API_KEY hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, tukitumia /pages/_app.tsx maalum, 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>
	);
}

Ikiwa tayari una pageProps na _app.tsx za kawaida, tafadhali panua ufafanuzi kwa mali na msimbo ulio hapo juu.

Hatua ya 4: Kutekeleza uwasilishaji wa upande wa seva

TacoTranslate inaruhusu kutekelezwa kwa upande wa seva kwa tafsiri zako. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kwanza kuonekana kidogo kwa maudhui yasiyotafsiriwa. Zaidi ya hayo, tunaweza kupunguza ombi za mtandao kwenye mteja, kwa sababu tayari tunayo 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, tumeweka tu programu ya Next.js na orodha ya lugha zinazotegemewa. Kitu kinachofuata tutakachofanya ni kupata tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Hizi functions zinachukua hoja tatu: Kitu kimoja cha Next.js Static Props Context, usanidi kwa ajili ya TacoTranslate, na mali za hiari za Next.js. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imeweka kwa 60 kwa default, ili tafsiri zako ziendelee kuwa za kisasa.

Ili kutumia yoyote ya functions hizi kwenye ukurasa, tuchukulie 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 mistari ndani ya sehemu zako zote za React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na jaribu!

Tumaliza! Programu yako ya React sasa itatafsiriwa moja kwa moja unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kwamba ni mazingira yenye ruhusa za read/write kwenye API key pekee yataweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia API key kama hiyo, ukiongeza mistari mipya kabla ya kuanzisha rasmi. Hii itazuia mtu yeyote kunakili API key yako ya siri, na kwa uwezekano kuibua mradi wako wa tafsiri kwa kuongeza mistari mipya isiyo na uhusiano.

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

TacoTranslate inakuwezesha kuweka lugha za maombi yako za React kiotomatiki haraka kwenda na kutoka zaidi ya lugha 75. Anza leo!