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

Jinsi inavyofanya kazi

Kadiri dunia inavyozidi kuwa ya kimataifa, inakuwa 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 internationalization (i18n), ambayo inakuwezesha kurekebisha programu yako kwa lugha tofauti, sarafu, na miundo tofauti ya tarehe.

Kwenye mwongozo huu, tutaangalia jinsi ya kuongeza internationalization kwenye programu yako ya React Next.js, kwa 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 tazama mwongozo huu badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutoa msaada wa lugha nyingi (internationalization) katika programu yako ya Next.js, kwanza tuta-chagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, zikiwemo next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri moja kwa moja maneno (strings) yako hadi lugha yoyote kwa kutumia AI ya kisasa, na inakuokoa kutoka kwa usimamizi wa kuchosha wa faili za JSON.

Tuisakinishe kwa kutumia npm kwenye terminali yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya TacoTranslate ya bure

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

Ndani ya UI ya programu ya TacoTranslate, unda mradi, kisha nenda kwenye kichupo cha funguo za API. Tengeneza ufunguo mmoja read na ufunguo mmoja read/write. Tutayahifadhi kama vigezo vya mazingira. Ufunguo read ndiyo tunaoita public na ufunguo read/write ni secret. Kwa mfano, unaweza kuyaongeza katika faili .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauwahi kuvuza ufunguo wa API wa siri read/write kwa mazingira ya uzalishaji upande wa mteja.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo-msingi la lugha utakaotumika kama chaguo la kurudi (fallback locale). Katika mfano huu, tutauweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “Folda” ambayo misemo 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: Kusanidi TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja ukitumia vifunguo vya API ulivyovipata 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;

Hivi karibuni tutaiweka kwa kiotomatiki TACOTRANSLATE_API_KEY.

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

Ikiwa tayari una pageProps na _app.tsx maalum, tafadhali panua ufafanuzi huo kwa kutumia mali na msimbo vilivyotajwa hapo juu.

Hatua ya 4: Kutekeleza uonyeshaji upande wa seva

TacoTranslate inaruhusu kuonyeshwa upande wa seva kwa tafsiri zako. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao kwenye 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 ulingane na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, ya mtihani, au ya maandalizi (isProduction is false), tutatumia ufunguo wa API wa siri read/write ili kuhakikisha maandishi mapya yanatumwa kwa tafsiri.

Mpaka sasa, tumetayarisha tu programu ya Next.js kwa orodha ya lugha zinazoungwa mkono. Jambo linalofuata ni kuchukua tafsiri za kurasa zako zote. Kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

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

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

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Weka kwenye uzalishaji na ujaribu!

Tumemaliza! Programu yako ya Next.js sasa itatafsiriwa kiotomatiki unapoongeza maandishi yoyote kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye ufunguo wa API pekee ndio yataweza kuunda maandishi mapya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API wa aina hiyo, ukiongeza maandishi mapya kabla ya kuingia mtandaoni. Hii itaizuia mtu yeyote mtu yeyote kuiba ufunguo wako wa API wa siri, na inaweza pia kuzuia kuongezeka kupita kiasi 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!