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

Kadiri dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa waendelezaji wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Njia mojawapo kuu ya kufanikisha hili ni kupitia utafsiri wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kulingana na lugha tofauti, sarafu, na miundo ya tarehe.

Kwenye makala haya, tutachunguza jinsi ya kuongeza utafsiri wa kimataifa kwenye programu yako ya React Next.js, ikiwa na uonyeshaji wa upande wa seva. TL;DR: Tazama mfano kamili hapa.

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

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utafsiri wa lugha mbalimbali (internationalization) katika programu yako ya Next.js, kwanza tutachagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, pamoja na next-intl. Katika mfano huu, hata hivyo, tutatumia TacoTranslate.

TacoTranslate hutafsiri moja kwa moja mstring zako kwa lugha yoyote kwa kutumia AI ya kisasa zaidi, na hukuruhusu kuepuka usimamizi mzito wa faili za JSON.

Tuanze kuisanikisha kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

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

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na uelekee kwenye kichupo cha funguo za API. Unda funguo moja ya read, na funguo moja ya read/write. Tutazihifadhi kama vigezo vya mazingira. Funguo ya read ndiyo tunayoita public na funguo ya read/write ni secret. Kwa mfano, unaweza kuziweka kwenye faili la .env kwenye mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Nambari ya kiasili ya lugha ya dharura. Katika mfano huu, tutaipanga kuwa 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: Kusanidi TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja kwa kutumia funguo za API kutoka awali. Kwa mfano, tengeneza faili yenye jina /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;

Tutaainisha moja kwa moja TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi karibuni.

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'; inayoonyesha kuwa hii ni sehemu ya mteja.

Kwa kuwa mtoaji wa muktadha sasa yuko tayari, tengeneza faili iitwayo /app/[locale]/layout.tsx, muundo mzizi 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] kuchukua tafsiri za lugha hiyo. Zaidi ya hayo, generateStaticParams inahakikisha kwamba msimbo yote wa lugha ulioamilishwa kwa mradi wako unarushwa kabla.

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!" />
	);
}

Chukua funguo la revalidate linaloambia Next.js kujenga tena ukurasa baada ya sekunde 60, na kuweka tafsiri zako ziwe za kisasa.

Hatua ya 4: Kutekeleza uwasilishaji wa upande wa seva

TacoTranslate inaunga mkono rendering upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya mwanga wa maudhui ambayo hayajatafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao upande wa mteja, kwa sababu tayari tuna tafsiri tunazohitaji kwa ukurasa ambao mtumiaji anatazama.

Ili kuweka upigaji picha 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 uelekezaji unafanya kazi kama inavyotarajiwa, tutahitaji kuunda faili yenye jina /middleware.ts. Kutumia Middleware, tunaweza kuelekeza watumiaji kwa kurasa zilizowasilishwa 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 Middleware za Next.js.

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

Hatua ya 5: Sambaza na jaribu!

Tumemaliza! Programu yako ya React sasa itatafsiriwa moja kwa moja wakati unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kuwa ni mazingira yenye ruhusa za read/write kwenye ufunguo wa API peke yao ndio yataweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia ufunguo wa API kama huo, ukiongeza mistari mipya kabla ya kuanza rasmi. Hii itazuia mtu yeyote kuiba ufunguo wako wa siri wa API, na pia kuzuia kuongezeka kupita kiasi kwa mradi wako wa tafsiri kwa kuingiza mistari mipya isiyo husiana.

Hakikisha uangalie mfano kamili kwenye profaili yetu ya GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hivi kwa kutumia Pages Router! Ikiwa utakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.

TacoTranslate inakuwezesha kuweka lugha za maombi yako ya React kiotomatiki haraka kwa lugha yoyote ile. Anza leo!