Jinsi ya kutekeleza utafsiri wa lugha nyingi katika programu ya Next.js inayotumia App Router

Wakati dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa waendelezaji wa wavuti kujenga programu ambazo zinaweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia muhimu za kufanikisha hili ni kupitia uanzishaji wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha tofauti, sarafu, na muundo wa tarehe.

Kifungu hiki, tutachunguza jinsi ya kuongeza uanzishaji wa kimataifa kwenye programu yako ya React Next.js, ikitumia upigaji picha upande wa seva (server side rendering). TL;DR: Tazama mfano kamili hapa.

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

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utawala wa kimataifa 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 mistari yako moja kwa moja kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuhusu kutoka kwa usimamizi wa kuchosha wa faili za JSON.

Hebu tuiweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa baada ya kuisanidua moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo zinazohusiana za API. Unda akaunti hapa. Ni bure, na haitakiwi utaongeze kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na elekea kwenye kichupo cha funguo za API. Unda ufunguo mmoja wa read, na ufunguo mmoja wa read/write. Tutahifadhi hizi kama vigezo vya mazingira. Ufunguo wa read ndilo linaloitwa public, na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuziambatisha kwenye faili la .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha haufichui kamwe siri ya ufunguo wa API read/write kwa mazingira ya uzalishaji upande wa mteja.

Pia tutaongeza mabadiliko mawili zaidi ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo-mwanzilio wa chaguo la msingi. Katika mfano huu, tutaamua kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" ambapo misuli 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

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

Tutakuwa tukifafanua kiotomatiki TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi punde.

Kutengeneza client katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. getLocales ni tu kifuniko cha matumizi yenye utunzaji wa makosa uliojengwa ndani. Sasa, tengeneza faili inayojulikana kama /app/[locale]/tacotranslate.tsx, ambapo tutaweka huduma ya 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 sehemu ya mteja.

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

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 ya Dynamic Route [locale] kupata tafsiri za lugha hiyo. Zaidi ya hayo, generateStaticParams inahakikisha kuwa misimbo yote ya lugha ambayo umeiwezesha kwa mradi wako imejengwa mapema.

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

Hatua ya 4: Kutekeleza rendering upande wa seva

TacoTranslate inaunga mkono utafsiri kwa upande wa seva. Hii inaongeza sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuwaonesha maudhui yasiyotafsiriwa kwa muda mfupi awali. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao kwenye mteja, kwa sababu tayari tunayo tafsiri tunazohitaji kwa ukurasa anayouangalia mtumiaji.

Ili kusanidi server side rendering, 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 routing na urejeshaji hufanya kazi kama inavyotarajiwa, tutahitaji kuunda faili linaloitwa /middleware.ts. Kutumia Middleware, tunaweza kuweka watumiaji katika 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 kuanzisha matcher kwa mujibu wa nyaraka za Next.js Middleware.

Kwenye mteja, unaweza kubadilisha kuki ya locale ili kubadilisha lugha anayopendelea mtumiaji. Tafadhali angalia msimbo kamili wa mfano kwa mawazo juu ya jinsi ya kufanya hivi!

Hatua ya 5: Sambaza na jaribu!

Tumaliza! Programu yako ya React sasa itatafsirishwa moja kwa moja unapoongeza misururu yoyote kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye funguo za API pekee ndiyo yatakayoweza kuunda misururu mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kufanyia majaribio programu yako ya utengenezaji kwa kutumia funguo za API kama hizo, ukiongeza misururu mipya kabla ya kwenda moja kwa moja. Hii itazuia mtu yeyote kunakili funguo zako za API za siri, na pia kuzuia mrundikano wa mradi wako wa tafsiri kwa kuongeza misururu mipya isiyohusiana.

Hakikisha kuangalia mfano kamili kwenye wasifu wetu wa GitHub. Hapo, pia utapata mfano wa jinsi ya kufanya hili ukitumia Pages Router! Ikiwa ukikutana na matatizo yoyote, jisikie huru kuwasiliana nasi, nasi tutafurahi sana kusaidia.

TacoTranslate inakuwezesha kufanikisha utafsiri wa programu zako za React kwa haraka kwa lugha yoyote. Anza leo!