Jinsi ya kutekeleza kuanzishwa kwa lugha nyingi katika programu ya Next.js inayotumia App Router

Wakati dunia inavyozidi kuwa ya 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 uunganishaji wa kimataifa (i18n), ambao unakuwezesha kuendana na lugha tofauti, sarafu, na miundo ya tarehe.

Kifungu hiki, tutaangazia jinsi ya kuongeza uunganishaji wa kimataifa kwenye programu yako ya React Next.js, ukiwa na uwasilishaji wa upande wa seva. TL;DR: Tazama mfano kamili hapa.

Mwongozo huu ni kwa ajili ya maombi ya Next.js yanayotumia App Router.
Ikiwa unatumia Pages Router, tazama mwongozo huu badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza uboreshaji wa lugha katika programu yako ya Next.js, kwanza tuta chagua 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, na inakuondolea usumbufu wa kusimamia faili za JSON.

Hebu tuiweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa kwa kuwa umeweka moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa utafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na hahitaji kuongeza kadi ya mkopo.

Ndani ya kiolesura cha programu ya TacoTranslate, tengeneza mradi, kisha nenda kwenye tabo ya API keys. Unda ufunguo mmoja read na ufunguo mmoja read/write. Tutaweka kama vigezo vya mazingira. Ufunguo wa read ndiyo tunaoita public na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuviweka kwenye faili la .env lililopo kwenye mizizi ya mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha haukumii funguo za siri za API read/write kwa mazingira ya uzalishaji ya upande wa mteja.

Pia tutaongeza mazingira mengine mawili ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo la msingi la kurejelea. Katika mfano huu, tutajitahidi kuweka en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “Folda” ambapo 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: Kuweka TacoTranslate katika hali ya kazi

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja ukitumia funguo za API zilizo hapo awali. Kwa mfano, unda 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;

Tutakuwa tukibainisha moja kwa moja TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi punde.

Kutengeneza mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. getLocales ni kazi ya msaada tu yenye utunzaji wa makosa uliojengwa 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 kwamba hii ni sehemu ya mteja.

Sasa baada ya mtoaji wa muktadha kuwa tayari, tengeneza faili yenye jina /app/[locale]/layout.tsx, ambayo ni muundo wa mizizi katika programu yetu. Kumbuka kuwa njia hii ina folda inayotumia Dynamic Routes, ambapo [locale] ni parameter ya mabadiliko.

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 kuzifahamu hapa ni kwamba tunatumia parameter yetu ya Dynamic Route [locale] kuchukua tafsiri za lugha hiyo. Zaidi ya hayo, generateStaticParams inahakikisha kwamba misimbo yote ya lugha uliyoamilisha kwa mradi wako imetayarishwa mapema.

Sasa, hebu tujenge ukurasa wetu wa kwanza! Unda faili liitwalo /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 variable ya revalidate inayowaambia Next.js kujenga upya ukurasa baada ya sekunde 60, na kuweka tafsiri zako zikiwa za kisasa.

Hatua ya 4: Kutekeleza uwasilishaji upande wa seva

TacoTranslate inasaidia server side rendering. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonekana kwa maudhui yasiyo ya tafsiri kwanza. Zaidi ya hayo, tunaweza kupuuza ombi za mtandao kwenye mteja, kwa sababu tayari tunayo tafsiri tunazohitaji kwa ukurasa unaoangaliwa na mtumiaji.

Ili kuweka upigaji picha 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};
};

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.

Ili kuhakikisha upangaji na uelekezaji unafanyakazi kama inavyotarajiwa, tutahitaji kuunda faili inayoitwa /middleware.ts. Kutumia Middleware, tunaweza kuelekeza watumiaji kwa kurasa zinazowasilishwa katika 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 kuanzisha matcher kwa mujibu wa nyaraka za Next.js Middleware.

Kwenye upande wa mteja, unaweza kubadilisha keki ya locale kubadilisha lugha inayopendekezwa na mtumiaji. Tafadhali angalia kani kamili ya mfano kwa mawazo juu ya jinsi ya kufanya hivyo!

Hatua ya 5: Tuma na jaribu!

Tumemaliza! Programu yako ya React sasa itatafsirika moja kwa moja unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kuwa ni mazingira tu yenye ruhusa za read/write kwenye funguo za API zitakazoweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza uwe na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukiwa na funguo ya API kama hiyo, kuongeza mistari mipya kabla ya kuanzisha rasmi. Hii itazuia mtu yeyote kuiba funguo zako za siri za API, na kwa uwezekano kueneza mradi wako wa tafsiri kwa kuongeza mistari mipya isiyo husiana.

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!