Suluhisho bora kwa utekelezaji wa kimataifa (i18n) katika programu za Next.js

Jinsi inavyofanya kazi

Kadri dunia inavyokuwa ya kimataifa zaidi, inazidi kuwa muhimu kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Njia mojawapo ya muhimu ya kufikia hili ni ujumuishaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.

K katika mwongozo huu, tutaangalia jinsi ya kuongeza ujumuishaji wa kimataifa kwenye programu yako ya React Next.js, pamoja na uonyeshaji 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 utafsiri wa programu kwa lugha mbalimbali (internationalization) katika programu yako ya Next.js, tutaanza kwa kuchagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, ikiwa ni pamoja na next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate inatafsiri kwa otomatiki maandishi yako kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuokoa kutokana na usimamizi wa kuchosha wa mafaili ya JSON.

Wacha tuiweke 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 hayahitaji uweke kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na nenda kwenye kichupo chake cha funguo za API. Tengeneza funguo moja read na funguo moja read/write. Tutazihifadhi kama vigezo vya mazingira. Funguo la read ndilo tunaloita public, na funguo la read/write ndilo secret. Kwa mfano, unaweza kuziweka kwenye faili .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauwahi kuvuza funguo ya API ya siri read/write katika mazingira ya uzalishaji upande wa mteja.

Pia tutaongeza vigezo viwili vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo la chaguo-msingi litakalotumika kama mbadala. Katika mfano huu, tutaweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “kabrasha” ambako stringi zako zitahifadhiwa, 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 zilizo hapo 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;

Tutabainisha TACOTRANSLATE_API_KEY kiotomatiki hivi karibuni.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx iliyobinafsishwa, tutaongeza mtoa huduma 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 kwa sifa na msimbo vilivyotajwa hapo juu.

Hatua ya 4: Kutekeleza kuonyeshwa kwa upande wa seva

TacoTranslate inaruhusu uonyeshaji wa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kipindi kifupi ambacho maudhui yasiyotafsiriwa yanaonekana kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao upande wa mteja, kwa sababu tayari tunayo 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'),
	});
};

Badilisha ukaguzi wa isProduction ili ufaa usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, majaribio, au ya staging (isProduction is false), tutatumia ufunguo wa API wa siri read/write ili kuhakikisha misemo mpya yatumwe kwa tafsiri.

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

Funsi hizi zinachukua vigezo vitatu: kimoja ni kitu cha Next.js Static Props Context, usanidi wa TacoTranslate, na mali za Next.js za hiari. Tambua kwamba revalidate kwenye getTacoTranslateStaticProps imewekwa kuwa 60 kwa chaguo-msingi, ili tafsiri zako ziendelee kuwa za sasa.

Ili kutumia yoyote ya 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 komponenti Translate kutafsiri maandishi ndani ya vipengele vyote vya React vyako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na ujaribu!

Tumeisha! Programu yako ya Next.js sasa itatafsiriwa kiotomatiki unapoongeza maandishi yoyote kwenye komponenti ya Translate. Kumbuka kuwa ni mazingira tu yenye ruhusa za read/write kwenye ufunguo wa API yataweza kuunda maandishi mapya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na yaliyo salama ambapo unaweza kujaribu programu yako ya uzalishaji ukiwa na ufunguo wa API kama huo, ukiongeza maandishi mapya kabla ya kuenda mtandaoni. Hii itawazuia mtu yeyote yeyote kuiba ufunguo wako wa siri wa API, na huenda ikapelekea kupanuka kwa mradi wako wa tafsiri kwa kuongeza maandishi mapya yasiyohusiana.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!