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

Tā kā pasaule kļūst arvien globalizētāka, web izstrādātājiem kļūst arvien svarīgāk veidot lietotnes, 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 lietotni dažādām valodām, valūtām un datuma formātiem.

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

Šī rokasgrāmata ir paredzēta Next.js lietotnēm, kas izmanto App Router.
Ja izmantojat Pages Router, skatiet šo rokasgrāmatu.

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 tulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no laikietilpīgas JSON failu pārvaldības.

Instalēsim to, izmantojot npm savā terminālī:

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad jums ir instalēts modulis, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams norādīt kredītkarti.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka nekad neizpaužat slepeno read/write API atslēgu klienta puses produkcijas vidēs.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma atlaišanas lokalizācijas kods. Šajā piemērā mēs to iestatīsim uz en angļu valodai.
• TACOTRANSLATE_ORIGIN: “Mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu mājaslapas URL. Lasiet vairāk par izcelsmi š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ētos 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īz automātiski definēsim TACOTRANSLATE_API_KEY un TACOTRANSLATE_PROJECT_LOCALE.

Klienta izveide atsevišķā failā padara tā atkārtotu izmantošanu vieglu. getLocales ir tikai utilītprogrammas funkcija ar iebūvētu kļūdu apstrādi. Tagad izveidojiet failu ar nosaukumu /app/[locale]/tacotranslate.tsx, kurā mēs realizēsim 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>
	);
}

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

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, kas šeit jāņem vērā, ir tas, ka mēs izmantojam mūsu Dynamic Route parametru [locale], lai iegūtu tulkojumus šai valodai. Turklāt generateStaticParams nodrošina, ka visi valodu kodi, ko esat aktivizējuši savam projektam, tiek iepriekš renderēti.

Tagad izveidosim mūsu pirmo lapu! Izveidojiet failu, kas nosaukts /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 aktuālus.

4. solis: Servera puses renderēšanas īstenošana

TacoTranslate atbalsta servera puses renderēšanu. Tas ievērojami uzlabo lietotāja pieredzi, parādot tulkoto saturu nekavējoties, nevis vispirms rādot nenotulkotu satura zibšņus. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir tulkojumi, kas nepieciešami 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 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, kas tiek rā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 iestatījis matcher saskaņā ar Next.js Middleware dokumentāciju.

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

5. solis: Izvietojiet un testējiet!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkuras virknes Translate komponentam. Ņemiet vērā, ka tikai vides ar read/write atļaujām uz API atslēgu spēs izveidot jaunas virknes tulkošanai. 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 jaunas virknes pirms palaišanas tiešraidē. Tas novērsīs, ka kāds nozog jūsu slepeno API atslēgu un iespējams pārslogos jūsu tulkošanas projektu, pievienojot jaunas, neatbilstošas virknes.

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

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