Jinsi ya kutekeleza utofauti wa kimataifa katika programu ya Next.js inayotumia App Router

Wakati dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa waendelezaji wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia kuu za kufanikisha hili ni kupitia utafsiri wa kimataifa (i18n), ambao hukuruhusu kubadilisha programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.

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

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

Hatua ya 1: Sakinisha maktaba ya i18n

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

Hebu tuiweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Tengeneza akaunti ya bure ya TacoTranslate

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

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na uelekeze kwenye kichupo cha vibonye vya API. Tengeneza kibonye kimoja cha read, na kibonye kimoja cha read/write]. Tutaweka kama vigezo vya mazingira. Kibonye cha read kinachoitwa public na kibonye cha read/write ni secret. Kwa mfano, unaweza kuvitia katika faili la .env kwenye mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha kuwa hauwahi kufichua siri ya kitufe cha read/write API kwa mazingira ya uzalishaji upande wa mteja.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa eneo-msingi la kuepuka makosa. Katika mfano huu, tutajitenga na en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "folda" ambapo mfululizo wako utahifadhiwa, 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 tukitambulisha kiotomatiki TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi karibuni.

Kuumba client katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. getLocales ni tu kazi ya msaada yenye usimamizi wa makosa uliojengwa ndani. Sasa, tengeneza faili yenye jina /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 sehemu ya mteja.

Ili kutoa muktadha, tengeneza faili lililo na jina /app/[locale]/layout.tsx, mpangilio wa msingi katika programu yetu. Kumbuka kwamba njia hii ina folda inayotumia Dynamic Routes, ambapo [locale] ni parameter ya kubadilika.

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 kipengele chetu cha Dynamic Route kinachoitwa [locale] kuchukua tafsiri za lugha hiyo. Zaidi ya hayo, generateStaticParams inahakikisha kwamba nambari zote za lugha ulizozizindua kwa mradi wako zimeandaliwa tayari kabla ya kuonyeshwa.

Sasa, hebu tujenge ukurasa wetu wa kwanza! Unda faili yenye jina /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 inayosema Next.js ujenge upya ukurasa baada ya sekunde 60, na kuweka tafsiri zako zikiwa za hivi punde.

Hatua ya 4: Kutekeleza uwasilishaji kwenye upande wa seva

TacoTranslate inaunga mkono uonyesho wa upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya mwangaza wa maudhui ambayo hayajatafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao kwenye mteja, kwa sababu tayari tunayo tafsiri tunazohitaji kwa ajili ya ukurasa ambao mtumiaji anaouona.

Ili kuweka upya uonyesho wa upande wa seva, tengeneza au badilisha /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 mwelekeo unafanya kazi kama inavyotarajiwa, tutahitaji kuunda faili yenye jina /middleware.ts. Kutumia Middleware, tunaweza kuelekeza watumiaji kwenye 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 kuweka sawa matcher kwa mujibu wa Nyaraka za Middleware za Next.js.

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

Hatua ya 5: Tengeneza na jaribu!

Tumaliza! Programu yako ya React sasa itatafsiriwa kiotomatiki unapoongeza mfuatano wowote wa maandishi kwenye sehemu ya Translate. Kumbuka kwamba ni mazingira tu yenye ruhusa za read/write kwenye ufunguo wa API ndio yataweza kuunda mfuatano mpya wa maandishi wa kutafsiriwa. Tunapendekeza uwe na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa ufunguo wa API kama huo, ukiongeza mfuatano mpya kabla ya kwenda moja kwa moja. Hii itazuia mtu yeyote kuiba ufunguo wako wa siri wa API, na kuzuia kuzidiwa mradi wako wa tafsiri kwa kuongeza mfuatano mipya isiyo husiana.

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

TacoTranslate inakuwezesha kutafsiri kwa kiotomatiki programu zako za React haraka kwenda na kutoka lugha yoyote ile. Anza leo!