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

Kā pasaule kļūst arvien globalizētāka, ir aizvien svarīgāk tīmekļa izstrādātājiem veidot lietojumprogrammas, kas spēj apkalpot lietotājus no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to panākt, 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: Pilns piemērs šeit.

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

1. solis: Instalējiet i18n bibliotēku

Lai jūsu Next.js lietotnē īstenotu internacionalizāciju, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Tomēr šajā piemēra gadījumā mēs izmantosim TacoTranslate.

TacoTranslate automātiski tulko jūsu virknes uz jebkuru valodu, izmantojot modernāko mākslīgo intelektu, atbrīvojot jūs no apnikušās 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 pienācis laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītos API atslēgas. Izveido kontu šeit. Tas ir bez maksas, un nepieprasa pievienot kredītkarti.

TacoTranslate 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 tos saglabāsim kā vidi mainīgos. read atslēgu saucam par public, bet read/write atslēgu — par secret. Piemēram, jūs varat tos pievienot .env failā jūsu projekta saknē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Mēs arī 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ā mēs to iestatīsim kā 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ām šeit.

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

3. solis: TacoTranslate iestatīšana

Lai integrētu TacoTranslate savā lietotnē, 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 izmantot vēlāk. getLocales ir tikai palīgfunkcija ar iebūvētu kļūdu apstrādi. Tagad izveidojiet failu ar nosaukumu /app/[locale]/tacotranslate.tsx, kurā mēs īstenosim TacoTranslate nodrošinā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>
	);
}

Ņemiet vērā 'use client';, kas norāda, ka šis ir klienta komponents.

Tagad, kad konteksta nodrošinātājs ir gatavs lietošanai, izveidojiet failu ar nosaukumu /app/[locale]/layout.tsx, kas ir mūsu lietotnes 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, kas šeit jāņem vērā, ir tas, ka mēs izmantojam mūsu Dynamic Route parametru [locale] tulkojumu iegūšanai attiecīgajai valodai. Turklāt, generateStaticParams nodrošina, ka visi valodu kodi, ko esat aktivizējis savam projektam, tiek iepriekš renderēti.

Tagad uzbūvēsim savu pirmo lapu! Izveido 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ērsiet uzmanību revalidate mainīgajam, kas norāda Next.js pārveidot lapu pēc 60 sekundēm un uzturēt jūsu tulkojumus atjauninātus.

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 parādot nepārtulkojamu saturu. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir nepieciešamie tulkojumi lapai, kuru 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 savam iestatījumam. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testēšanas vai starpposma vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jauni teksti tiek nosūtīti tulkošanai.

Lai nodrošinātu, ka maršrutēšana un pāradresācija darbojas kā paredzēts, mums būs jāizveido fails ar nosaukumu /middleware.ts. Izmantojot Middleware, mēs varam pāradresēt lietotājus uz lapām viņu izvēlētajā 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 saskaņā ar Next.js Middleware dokumentāciju.

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

5. solis: Izvietojiet un pārbaudiet!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkurus tekstus Translate komponentē. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām API atslēgā būs iespēja izveidot jaunus tulkojamos tekstus. Mēs iesakām izveidot slēgtu un drošu testēšanas vidi, kur varat pārbaudīt savu ražošanas lietotni ar tādu API atslēgu, pievienojot jaunus tekstus pirms publiskošanas. Tas novērsīs, ka kāds nozog jūsu slepeno API atslēgu un potenciāli nepalielinās jūsu tulkošanas projektu ar jauniem, nesaistītiem tekstiem.

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!