Kā īstenot internacionalizāciju Next.js lietotnē, kas izmanto App Router

Pasaule kļūst arvien globalizētāka, un tīmekļa izstrādātājiem kļūst aizvien svarīgāk veidot lietojumprogrammas, kas spēj apkalpot lietotājus no dažādām valstīm un kultūrām. Viena no galvenajām metodēm, kā to sasniegt, ir internacionalizācija (i18n), kas ļauj pielāgot jūsu lietojumprogrammu dažādām valodām, valūtām un datuma formātiem.

Šajā rakstā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogrammai ar servera puses renderēšanu. TL;DR: Skatīt pilnu piemēru šeit.

Šis ceļvedis ir paredzēts Next.js lietotnēm, kas izmanto App Router.
Ja jūs izmantojat Pages Router, skatiet šo ceļvedi.

1. solis: Instalējiet i18n bibliotēku

Lai ieviestu internacionalizāciju savā Next.js lietojumprogrammā, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Šajā piemērā tomēr izmantosim TacoTranslate.

TacoTranslate automātiski pārtulko jūsu tekstus jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no garlaicīgas JSON failu pārvaldības.

Instalēsim to, izmantojot npm jūsu terminālī:

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad modulis ir instalēts, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveido kontu šeit. Tas ir bez maksas un neprasa pievienot kredītkarti.

TacoTranslate lietotnes lietotāja interfeisā izveidojiet projektu un dodieties uz tā API atslēgu cilni. Izveidojiet vienu read atslēgu un vienu read/write atslēgu. Mēs saglabāsim tās kā vides mainīgos. read atslēgu saucam par public, bet read/write atslēgu par secret. Piemēram, tās var pievienot .env failam jūsu projekta saknes mapē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka nekad neatklājat slepeno read/write API atslēgu klienta puses ražošanas vidēm.

Mēs pievienosim vēl divas vides mainīgās: TACOTRANSLATE_DEFAULT_LOCALE un TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves lokalizācijas kods. Šajā piemērā to iestatīsim uz en angļu valodai.
• TACOTRANSLATE_ORIGIN: “Mape”, kur tiks glabāti jūsu teksti, piemēram, jūsu vietnes URL. Lasiet vairāk par originālo vietu šeit.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3. solis: TacoTranslate iestatīšana

Lai integrētu TacoTranslate ar jūsu lietotni, jums būs jāizveido klients, izmantojot iepriekš minētās API atslēgas. Piemēram, izveidojiet failu ar nosaukumu /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;

Mēs drīzumā automātiski definēsim TACOTRANSLATE_API_KEY un TACOTRANSLATE_PROJECT_LOCALE.

Klienta izveide atsevišķā failā padara to viegli atkārtoti lietojamu vēlāk. getLocales ir tikai palīgfunkcija ar dažām iebūvētām kļūdu apstrādēm. Tagad izveido failu ar nosaukumu /app/[locale]/tacotranslate.tsx, kurā ieviesīsim TacoTranslate piegādātāju.

'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>
	);
}

Pievērsiet uzmanību 'use client';, kas norāda, ka šis ir klienta komponents.

Kad tagad konteksta nodrošinātājs ir gatavs, izveidojiet failu ar nosaukumu /app/[locale]/layout.tsx, kas ir mūsu lietojumprogrammas saknes izkārtojums. Ņemiet vērā, ka šajā ceļā ir mape, kas izmanto Dynamic Routes, kur [locale] ir dinamiskais parametrs.

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>
	);
}

Pirmais, ko šeit jāņem vērā, ir tas, ka mēs izmantojam mūsu Dynamic Route parametru [locale] tulkojumu iegūšanai attiecīgajai valodai. Papildus tam, generateStaticParams nodrošina, ka visi lokalizācijas kodi, kurus esat aktivizējuši savam projektam, tiek priekšielādēti.

Tagad izveidosim mūsu pirmo lapu! Izveidojiet failu ar nosaukumu /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!" />
	);
}

Pievērs uzmanību revalidate mainīgajam, kas norāda Next.js pārbūvēt lapu pēc 60 sekundēm un uzturēt tulkojumus aktuālus.

4. solis: Servera puses renderēšanas ieviešana

TacoTranslate atbalsta servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, uzreiz parādot tulkotu saturu, nevis vispirms neaptulkota satura mirkli. Turklāt mēs varam izlaist tīkla pieprasījumus klientā, jo mums jau ir nepieciešamie tulkojumi lapai, ko lietotājs skatās.

Lai iestatītu servera puses renderēšanu, izveidojiet vai modificējiet /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};
};

Pielāgojiet isProduction pārbaudi atbilstoši jūsu konfigurācijai. Ja true, TacoTranslate izmantos publisko API atslēgu. Ja atrodamies vietējā, testēšanas vai staging vidē (isProduction is false), tiks izmantota slepenā read/write API atslēga, lai nodrošinātu jaunu tekstu nosūtīšanu tulkošanai.

Lai nodrošinātu, ka maršrutēšana un pāradresācija darbojas paredzētajā veidā, mums būs jāizveido fails ar nosaukumu /middleware.ts. Izmantojot Middleware, mēs varam pāradresēt lietotājus uz lapām, kas tiek parādītas viņu vēlamajā valodā.

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);
}

Pārliecinieties, ka esat konfigurējis matcher atbilstoši Next.js starpprogrammatūras dokumentācijai.

Klientā jūs varat mainīt locale sīkfailu, lai izmainītu lietotāja vēlamo valodu. Lūdzu, skatiet pilnu piemēra kodu, lai iegūtu idejas, kā to izdarīt!

5. solis: Veiciet izvietošanu un testēšanu!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādus tekstus Translate komponentam. Ņemiet vērā, ka tikai vidēm ar read/write atļaujām uz API atslēgas būs iespējams izveidot jaunus tekstus tulkošanai. Mēs iesakām izmantot aizvērto un drošo testēšanas vidi, kurā varat pārbaudīt savu produkcijas lietotni ar šādu API atslēgu, pievienojot jaunus tekstus pirms to publicēšanas. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs iespēju, ka jūsu tulkošanas projekts tiks nepamatoti uzpūsts ar jauniem, nesaistītiem tekstiem.

Noteikti apskatiet pilno piemēru mūsu GitHub profilā. Tur jūs atradīsiet arī piemēru, kā to izdarīt, izmantojot Pages Router ! Ja radīsies kādas problēmas, droši sazinieties ar mums, un mēs ar prieku jums palīdzēsim.

TacoTranslate ļauj automātiski lokalizēt jūsu React lietotnes ātri uz un no jebkuras valodas. Sāciet jau šodien!