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

Līdz ar pasaules globalizāciju arvien svarīgāk ir, lai tīmekļa izstrādātāji veidotu 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 datumu formātiem.

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

Šis ceļvedis 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 savā 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ērā mēs izmantosim TacoTranslate.

TacoTranslate automātiski tulko jūsu tekstus jebkurā valodā, izmantojot modernu mākslīgā intelekta tehnoloģiju, un atbrīvo jūs no garlaicīgas JSON failu pārvaldīšanas.

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

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad esat instalējis moduli, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un ar to saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav jānorāda kredītkarte.

TacoTranslate lietotnes saskarnē 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 mēs saucam par public un read/write atslēgu par secret. Piemēram, jūs tās varētu pievienot .env failam jūsu projekta saknē.

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 divas vides mainīgās vērtības: 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 valoda).
• TACOTRANSLATE_ORIGIN: “mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Uzziniet 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 izveidošana atsevišķā failā padara to viegli izmantojamu arī 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 ī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, 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>
	);
}

Pirmā lieta, ko šeit jāpatur prātā, ir tā, ka mēs izmantojam mūsu Dynamic Route parametru [locale], lai izgūtu tulkojumus attiecīgajai valodai. Turklāt generateStaticParams nodrošina, ka visi lokāles kodi, kurus esat aktivizējis savā projektā, tiek iepriekš renderēti.

Tagad izveidosim mūsu 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 liek Next.js pārbūvēt lapu pēc 60 sekundēm un uztur 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, jo tulkots saturs tiek rādīts uzreiz, nevis vispirms parādās īslaicīgs nepārtulkota satura zibšnis. Turklāt klienta pusē varam izlaist tīkla pieprasījumus, jo mums jau ir nepieciešamie tulkojumi lapai, kuru lietotājs pašlaik skatās.

Lai iestatītu serverpuses 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āgo isProduction pārbaudi savam iestatījumam. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja atrodamies lokālajā, testēšanas vai staging vidē (isProduction is false), izmantosim slepeno read/write API atslēgu, lai pārliecinātos, ka jaunas virknes tiek nosūtītas tulkošanai.

Lai nodrošinātu, ka maršrutēšana un pāradresēšana darbojas kā paredzēts, mums būs jāizveido fails ar nosaukumu /middleware.ts. Izmantojot Middleware, mēs varam novirzī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 matcher ir iestatīts saskaņā ar Next.js Middleware dokumentāciju.

Klienta pusē varat mainīt locale sīkfailu, lai nomainītu lietotāja vēlamo valodu. Lūdzu, skatiet pilno piemēra kodu, lai iegūtu idejas, kā to izdarīt!

5. solis: Izvietojiet un pārbaudiet!

Izdarīts! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkuras teksta virknes 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 tulkošanai. Mēs iesakām izveidot slēgtu un drošu testēšanas vidi, kurā varat pārbaudīt savu produkcijas lietotni, izmantojot šādu API atslēgu, un pievienot jaunas virknes pirms izvēršanas. Tas novērsīs, ka jebkurš jebkurš nozog jūsu slepeno API atslēgu, un potenciāli uzpūst jūsu tulkojumu 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!