Jinsi ya kutekeleza msaada wa lugha nyingi katika programu ya Next.js ambayo inatumia App Router

Kadiri dunia inavyokuwa ya kimataifa zaidi, ni muhimu zaidi kwa watengenezaji wa wavuti kujenga programu ambazo zinaweza kuwahudumia watumiaji kutoka nchi na tamaduni mbalimbali. Moja ya njia kuu za kufanikisha hili ni kupitia kuwezesha matumizi ya lugha mbalimbali (i18n), ambayo inakuwezesha kurekebisha programu yako kwa lugha tofauti, sarafu, na muundo wa tarehe.

Katika makala hii, tutajifunza jinsi ya kuongeza msaada wa lugha nyingi (i18n) kwenye programu yako ya React Next.js, pamoja na upigaji ukurasa upande wa seva. TL;DR: Tazama mfano kamili hapa.

Mwongozo huu ni kwa programu za Next.js zinazotumia App Router.
Ikiwa unatumia Pages Router, angalia mwongozo huu badala yake.

Hatua 1: Sakinisha maktaba ya i18n

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

TacoTranslate inatafsiri moja kwa moja maandishi yako kwa lugha yoyote ikitumia AI ya kisasa, na inakuondolea kazi ya kuchosha ya kusimamia faili za JSON.

Tuisakinishe kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya TacoTranslate ya bure

Sasa kwa kuwa umesakinisha moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi la tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na huhitaji kuongeza kadi ya mkopo.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha siri ya ufunguo wa API read/write haivujwi kamwe katika mazingira ya uzalishaji upande wa mteja.

Tutaongeza pia vigezo viwili zaidi vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa locale wa chaguo-msingi. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “folda” ambapo misemo yako ya maandishi 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 funguo za API zilizotajwa 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Tutabainisha kiotomatiki TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi punde.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. getLocales ni kazi ya msaada tu yenye utunzaji wa makosa uliowekwa ndani. Sasa, tengeneza faili inayoitwa /app/[locale]/tacotranslate.tsx, ambapo tutatekeleza mtoa huduma wa TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Kumbuka 'use client'; ikionyesha kuwa hii ni komponenti ya mteja.

Kwa kuwa mtoa muktadha sasa tayari, unda faili iitwayo /app/[locale]/layout.tsx, mpangilio mzizi katika programu yetu. Kumbuka kuwa njia hii ina folda inayotumia Dynamic Routes, ambapo [locale] ni kigezo kinachobadilika.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Jambo la kwanza la kuzingatia hapa ni kwamba tunatumia parameter yetu Dynamic Route [locale] kupata tafsiri kwa ajili ya lugha hiyo. Zaidi ya hayo, generateStaticParams inahakikisha kwamba misimbo yote ya locale ambayo umeiwezesha kwa mradi wako imetayarishwa awali.

Sasa, hebu tujenge ukurasa wetu wa kwanza! Unda faili iliyoitwa /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Kumbuka kigezo revalidate kinachoambia Next.js kujenga tena ukurasa baada ya sekunde 60, na kusasisha tafsiri zako.

Hatua ya 4: Kutekeleza uonyesho upande wa seva

TacoTranslate inaunga mkono uonyeshaji upande wa seva. Hii inaboresha kwa kiasi kikubwa uzoefu wa mtumiaji kwa kuonyesha yaliyotafsiriwa mara moja, badala ya kuonekana kwa muda mfupi kwa maudhui yasiyotafsiriwa kwanza. Zaidi ya hayo, tunaweza kuepuka maombi ya mtandao upande wa mteja, kwa sababu tayari tunazo tafsiri tunazohitaji kwa ukurasa ambao mtumiaji anautazama.

Ili kusanidi uwasilishaji upande wa seva, tengeneza au ubadilishe /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Badilisha ukaguzi wa isProduction ili uendane na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API wa umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya kuandalia (isProduction is false), tutatumia ufunguo wa siri read/write wa API ili kuhakikisha misimbo mipya ya maandishi inatumwa kwa ufasiri.

Ili kuhakikisha kwamba upitishaji wa njia na uelekezaji upya vinavyofanya kazi kama vinavyotarajiwa, tutahitaji kuunda faili iitwayo /middleware.ts. Kwa kutumia Middleware, tunaweza kuwaelekeza watumiaji kwa kurasa zinazowasilishwa kwa lugha wanayopendelea.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Hakikisha kusanidi matcher kulingana na Nyaraka za Middleware za Next.js.

Kwa upande wa mteja, unaweza kubadilisha kuki ya locale ili kubadilisha lugha ambayo mtumiaji anapendelea. Tafadhali angalia mfano kamili wa msimbo kwa mawazo juu ya jinsi ya kufanya hivyo!

Hatua ya 5: Zindua na ujaribu!

Tumeisha! Programu yako ya React sasa itatafsiriwa kiotomatiki unapoongeza mfululizo wowote wa maandishi kwenye sehemu ya Translate. Kumbuka kwamba ni mazingira pekee yenye ruhusa za read/write kwenye ufunguo wa API ambayo yataweza kuunda mfululizo mpya wa maandishi utakao tafsiriwa. Tunapendekeza kuwa na mazingira ya staging yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukitumia ufunguo wa API wa aina hiyo, ukiongeza mfululizo mpya wa maandishi kabla ya kuingia mtandaoni. Hii itazuia mtu yeyote mtu yeyote kunyang'anya ufunguo wako wa siri wa API, na kwa uwezekano itazuia mradi wako wa tafsiri kupanuka kwa kuongeza mfululizo mpya usiohusiana.

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 Pages 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!