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

Kad pasaule kļūst arvien globalizētāka, tīmekļa izstrādātājiem kļūst aizvien 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 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 pilno piemēru šeit.

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

1. solis: Instalējiet i18n bibliotēku

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

Uzstādīsim to, izmantojot npm savā 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 tiem saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams pievienot kredītkarti.

TacoTranslate lietotnes saskarnē izveidojiet projektu un atveriet 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. Atslēga read ir tā, ko mēs saucam par public, savukārt atslēga read/write ir secret. Piemēram, jūs tās varat pievienot failam .env 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 divus vides mainīgos: 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).
• TACOTRANSLATE_ORIGIN: “mape”, kur tiks glabātas jūsu teksta 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 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 vieglāku atkārtotai izmantošanai. 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 implementēsim TacoTranslate sniedzē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, izveidojiet failu ar nosaukumu /app/[locale]/layout.tsx, kas ir mūsu lietotnes saknes izkārtojums. Ņemiet vērā, ka šis ceļš ietver mapi, 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>
	);
}

Pirmkārt, jāpiemin, ka šeit mēs izmantojam mūsu Dynamic Route parametru [locale], lai iegūtu šīs valodas tulkojumus. Turklāt generateStaticParams nodrošina, ka visi lokāļu kodi, kurus esat aktivizējuši savā projektā, tiek iepriekš renderē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!" />
	);
}

Ņemiet vērā revalidate mainīgo, kas liek Next.js pārģenerēt lapu pēc 60 sekundēm un uzturēt jūsu tulkojumus atjauninātus.

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

TacoTranslate atbalsta servera puses renderēšanu. Tas ievērojami uzlabo lietotāja pieredzi, jo tulkots saturs tiek parādīts uzreiz, nevis vispirms īslaicīgi parādās netulkots saturs. Turklāt klienta pusē varam izlaist tīkla pieprasījumus, 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 jūsu iestatījumiem. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testa vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jaunās virknes tiek nosūtītas 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 matcher ir iestatīts saskaņā ar Next.js Middleware dokumentāciju.

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

5. solis: Izvietojiet un pārbaudiet!

Viss ir gatavs! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkuras virknes komponentam Translate. Ņemiet vērā, ka tikai vidēm, kurām API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas tulkojamas virknes. Mēs iesakām izveidot slēgtu un drošu staging vidi, kurā varat testēt savu ražošanas lietotni ar šādu API atslēgu, pievienojot jaunus tekstus pirms publicēšanas. Tas novērsīs, ka ikviens ikviens var nozagt jūsu slepeno API atslēgu un potenciāli pārslogot jūsu tulkošanas projektu, pievienojot jaunus, nesaistītus ierakstus.

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!