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

Wakati dunia inavyokuwa zaidi ya kimataifa, ni muhimu zaidi kwa watengenezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia kuu za kufanikisha hili ni kupitia uwekaji wa kimataifa (i18n), ambao unakuwezesha kuunda programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.

K katika makala hii, tutachunguza jinsi ya kuongeza uwekaji wa kimataifa kwenye programu yako ya React Next.js, kwa kutumia 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, tazama mwongozo huu badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza uhamishaji lugha katika programu yako ya Next.js, kwanza tutachagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, ikiwa ni pamoja na next-intl. Katika mfano huu, hata hivyo, tutatumia TacoTranslate.

TacoTranslate hutafsiri moja kwa moja mistari yako kwa lugha yoyote kwa kutumia AI ya hali ya juu, 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 baada ya kuwa umeweka moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na hihitaji uongeze kadi ya mkopo.

Ndani ya kiolesura cha programu cha TacoTranslate, tengeneza mradi, na uende kwenye kichupo cha funguo za API. Tengeneza 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 kuziingiza kwenye faili ya .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Tut pia tutaongeza mabadiliko mawili zaidi ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa lugha ya chaguo-msingi ya kurudi nyuma. Katika mfano huu, tutaweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" ambapo mfululizo wako utawekwa, 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 kuingiza TacoTranslate katika programu yako, utahitaji kuunda mteja kwa kutumia funguo za API ulizotumia hapo awali. Kwa mfano, unda faili liitwalo /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 tukitumia moja kwa moja kufafanua TACOTRANSLATE_API_KEY na TACOTRANSLATE_PROJECT_LOCALE hivi karibuni.

Kutengeneza mteja kwenye faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. getLocales ni tu kazi ya kusaidia yenye usimamizi wa makosa uliowekwa ndani. Sasa, tengeneza faili liitwalo /app/[locale]/tacotranslate.tsx, ambapo tutatekeleza mtoaji 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.

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

Sasa, hebu tujenge ukurasa wetu wa kwanza! Tengeneza faili iitwayo /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 inayomwambia 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 inaunga mkono server side rendering. Hii inaongeza sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuwasha maudhui yasiyotafsiriwa kwanza. Zaidi ya hayo, tunaweza kuacha ombi la mtandao kwenye mteja, kwa sababu tayari tuna tafsiri tunazohitaji kwa ukurasa ambao mtumiaji anaotazama.

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 routing na urejeleaji vinafanya kazi kama ilivyotarajiwa, tutahitaji kuunda faili liitwalo /middleware.ts. Kutumia Middleware, tunaweza kurejesha 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 kusanidi matcher kwa mujibu wa nyaraka za Next.js Middleware.

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

Hatua ya 5: Weka na ujaribu!

Tumeimaliza! Programu yako ya React sasa itatafsiriwa kiotomatiki unapoongeza nyuzi zozote kwenye sehemu ya Translate. Kumbuka kwamba mazingira pekee yenye ruhusa za read/write kwenye API key ndiyo yatakayoweza kuunda nyuzi mpya za kutafsiriwa. Tunapendekeza kuwa na mazingira ya hatua iliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa kutumia API key kama hiyo, ukiongeza nyuzi mpya kabla ya kuingia kwenye uzalishaji wa moja kwa moja. Hii itazuia mtu yeyote kuiba API key yako ya siri, na kwa uwezekano kuimarisha mradi wako wa utafsiri kwa kuongezea nyuzi mpya zisizohusiana.

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!