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

Pasaule kļūst arvien globalizētāka, tāpēc tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietojumprogrammas, kas var apkalpot lietotājus no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, 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 apskatī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 lietojumprogrammā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 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 pārtulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.

Uzstādī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ītos API atslēgas. Izveido 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ēgu saucam par public, bet read/write atslēgu – par secret. Piemēram, jūs varat tās pievienot .env failam jūsu projekta saknē.

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ēs.

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 uz en angļu valodai.
• TACOTRANSLATE_ORIGIN: “Mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par origināliem š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īz automātiski definēsim TACOTRANSLATE_API_KEY un TACOTRANSLATE_PROJECT_LOCALE.

Klienta izveide atsevišķā failā ļauj to viegli izmantot arī vēlāk. getLocales ir tikai palīgfunkcija ar iebūvētu kļūdu apstrādi. Tagad izveido 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 šī ir klienta komponente.

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

Pirmā lieta, ko te jāņem vērā, ir tā, ka mēs izmantojam savu Dynamic Route parametru [locale] tulkojumu iegūšanai attiecīgajai valodai. Turklāt generateStaticParams nodrošina, ka visi lokāļu kodi, kurus esat aktivizējis savam projektam, tiek iepriekš uzģ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 norāda Next.js pārkonstruēt lapu pēc 60 sekundēm un uzturēt jūsu tulkojumus aktuālus.

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

TacoTranslate atbalsta servera puses renderēšanu. Tas ievērojami uzlabo lietotāja pieredzi, nekavējoties parādot tulkotu saturu, nevis vispirms rādot netulkotu 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 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 attēlotas 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 iestatījis matcher atbilstoši Next.js Middleware dokumentācijai.

Klientā jūs varat mainīt locale sīkfailu, 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: Izvieto un testē!

Mēs esam pabeiguši! Jūsu React lietojumprogramma tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes Translate komponentam. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām uz API atslēgu būs iespēja izveidot jaunas virknes tulkošanai. Mēs rekomendējam izmantot slēgtu un drošu testēšanas vidi, kurā varat pārbaudīt savu produkcijas lietojumprogrammu ar tādu API atslēgu, pievienojot jaunas virknes pirms publicēšanas. Tas novērsīs jebkura mēģinājumu nozagt jūsu slepeno API atslēgu un potenciāli pārlieku nepalielinā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!