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

Kad pasaule kļūst arvien globalizētāka, tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietotnes, kas spēj apmierināt 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 datumu 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: Skatiet pilno piemēru šeit.

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

1. solis: Instalējiet i18n bibliotēku

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

TacoTranslate automātiski tulko jūsu virknes jebkurā valodā, izmantojot mūsdienīgu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.

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

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

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

TacoTranslate lietotnes lietotāja saskarnē izveidojiet projektu un dodieties 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ēga ir tā, ko mēs saucam par public, bet read/write atslēga ir secret. Piemēram, jūs tās varat pievienot projekta saknes .env failam.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka slepenā read/write API atslēga nekad netiek nopludināta klienta puses ražošanas vidēs.

Mēs arī pievienosim vēl divus vides mainīgos: TACOTRANSLATE_DEFAULT_LOCALE un TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma fallback lokalizācijas kods. Šajā piemērā to iestatīsim uz en, kas apzīmē angļu valodu.
• TACOTRANSLATE_ORIGIN: „mape”, kurā tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par izcelsmēm š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;

Drīzumā mēs automātiski definēsim TACOTRANSLATE_API_KEY un TACOTRANSLATE_PROJECT_LOCALE.

Klienta izveide atsevišķā failā padara to viegli lietojamu 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>
	);
}

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

Tagad, kad konteksta nodrošinātājs ir gatavs, 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 dinamisks 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 savu Dynamic Route parametru [locale], lai izgūtu šai valodai atbilstošos tulkojumus. Papildus tam, generateStaticParams nodrošina, ka visi valodu kodi, kurus esat aktivizējis savā projektā, tiek iepriekš ģenerē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ērsiet uzmanību revalidate mainīgajam, kas liek Next.js pārveidot lapu pēc 60 sekundēm un uztur jūsu tulkojumus aktuālus.

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

TacoTranslate atbalsta servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, jo tulkots saturs tiek rādīts nekavējoties, nevis vispirms īslaicīgi parādās netulkots saturs. Turklāt klientā varam izvairīties no tīkla pieprasījumiem, jo mums jau ir nepieciešamie tulkojumi lapai, ko lietotājs pašlaik 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 savām vajadzībām. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja esam lokālā, testa vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jaunie 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, 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 iestatāt matcher saskaņā ar Next.js Middleware dokumentāciju.

Klientā varat mainīt locale sīkfailu, lai mainītu lietotāja izvēlēto valodu. Skatiet pilnu piemēra kodu, lai iegūtu idejas, kā to izdarīt!

5. solis: Izvietot un pārbaudīt!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks tulkota automātiski, kad pievienosiet jebkuru virkni Translate komponentā. Ņemiet vērā, ka tikai vidēs, kur API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas virknes, kas tiks tulkotas. Mēs iesakām nodrošināt slēgtu un drošu sagatavošanas vidi, kurā varat pārbaudīt savu produkcijas lietotni ar tādu API atslēgu un pievienot jaunas virknes pirms palaišanas ražošanā. Tas novērsīs, ka kāds kāds nozags jūsu slepeno API atslēgu un potenciāli nevajadzīgi paplašinās jūsu tulkošanas projektu, pievienojot jaunas, nesaistītas virknes.

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!