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

Hivyo duniani linapozidi kuwa na uunganisho wa kimataifa, ni muhimu zaidi kwa watengenezaji wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia kuu za kufanikisha hili ni kupitia uanzilishaji wa kimataifa (i18n), ambao unakuwezesha kuoanisha programu yako na lugha tofauti, sarafu, na miundo ya tarehe.

Katika mafunzo haya, tutaangalia jinsi ya kuongeza uanzilishaji 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 programu za Next.js zinazotumia Pages Router.
Ikiwa unatumia App Router, tafadhali tazama mwongozo huu badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utafsiri wa lugha 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 maneno yako kwa lugha yoyote kwa kutumia AI ya kisasa, na hukufanya usiwe na wasiwasi wa usimamizi wa mafaili ya JSON.

Twende tuitekeleze kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Tengeneza akaunti ya bure ya TacoTranslate

Sasa kwamba umesakinisha 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, na nenda kwenye kichupo cha funguo za API. Unda funguo moja ya read, na funguo moja ya read/write. Tutazihifadhi kama mabadiliko ya mazingira. Funguo ya read ndiyo tunayoita public na funguo ya read/write ni secret. Kwa mfano, unaweza kuziweka kwenye faili ya .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauwezi kuvuja siri ya ufunguo wa API wa read/write kwa mazingira ya uzalishaji upande wa mteja.

Pia tutaongeza vitu viwili zaidi vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kificho cha kiasili cha kizuizi cha lugha. Katika mfano huu, tutaweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 tukitambulisha TACOTRANSLATE_API_KEY moja kwa moja hivi punde.

Kuunda 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 zilizobinafsishwa, tafadhali panua ufafanuzi huo kwa mali na msimbo ulio hapo juu.

Hatua ya 4: Kutekeleza utupaji wa upande wa seva

TacoTranslate inaruhusu upigaji picha upande wa seva wa tafsiri zako. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa papo hapo, badala ya mwanga mfupi wa maudhui ambayo hayajatafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao upande wa 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.

Hadi sasa, tumeweka tu programu ya Next.js na orodha ya lugha zinazotumika. Jambo linalofuata tutakalofanya ni kuleta tafsiri kwa kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Kazi hizi huchukua hoja tatu: Kitu kimoja cha Next.js Static Props Context , usanidi wa TacoTranslate, na mali ya hiari ya Next.js. Kumbuka kuwa revalidate kwenye getTacoTranslateStaticProps imewekwa kuwa 60 kwa chaguo-msingi, ili tafsiri zako ziendelee kusasishwa.

Ili kutumia kazi yoyote katika ukurasa, wacha 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 vipengele vyote vya React zako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na jaribu!

Tumeisha! Programu yako ya React sasa ita tafsiriwa kiotomatiki unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kuwa mazingira yenye ruhusa za read/write kwenye funguo za API ndizo pekee zitakazoweza kuunda mistringi mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyo fungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia funguo za API kama hizo, ukiongeza mistari mipya kabla ya kuanzisha moja kwa moja. Hii itazuia mtu yeyote kuiba funguo zako za API za siri, na pia kuzuia kuongezeka kwa mradi wako wa tafsiri kwa kuongeza mistari mipya isiyo husiana.

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

TacoTranslate inakuwezesha kuleta lugha kwa urahisi kwa kutumia maombi yako ya React moja kwa moja kutoka na kwenda lugha yoyote. Anza leo!