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

Pasaules kļūstot arvien globalizētākai, web izstrādātājiem kļūst arvien svarīgāk veidot lietotnes, kas spēj pielāgoties lietotājiem 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: Skatīt pilnu piemēru šeit.

Šī rokasgrāmata ir paredzēta Next.js lietojumprogrammā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 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 nogurdinošas JSON failu pārvaldības.

Instalē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ītās API atslēgas. Izveido kontu šeit. Tas ir bez maksas, un nav nepieciešams ievadīt kredītkarti.

TacoTranslate 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 un read/write atslēgu par secret. Piemēram, jūs varat tās pievienot .env failam sava projekta saknes mapē.

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 vidi.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves valodas kods. Šajā piemērā mēs to iestatīsim uz en angļu valodai.
• TACOTRANSLATE_ORIGIN: “Mape”, kur tiks glabāti jūsu teksti, piemēram, jūsu tīmekļa vietnes URL. Lasiet vairāk par izcelsmi šeit.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3. solis: TacoTranslate iestatīšana

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 viegli izmantojamu arī nākotnē. getLocales ir tikai utilītas funkcija ar dažām iebūvētām kļūdu apstrādēm. Tagad izveidojiet failu ar nosaukumu /app/[locale]/tacotranslate.tsx, kur īstenosim TacoTranslate pakalpojumu 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.

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

Pirmā lieta, ko šeit jāņem vērā, ir tā, ka mēs izmantojam mūsu Dynamic Route parametru [locale] lai iegūtu tulkojumus attiecīgajai valodai. Turklāt generateStaticParams nodrošina, ka visi lokalizācijas kodi, kurus esat aktivizējis savam projektam, 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!" />
	);
}

Pievērsiet uzmanību revalidate mainīgajam, kas saka Next.js pārveidot 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, uzreiz parādot tulkotu saturu, nevis vispirms rādot nesaktuloto saturu. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, 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 iestatījumiem. Ja true, TacoTranslate nodrošinās publisko API atslēgu. Ja atrodamies lokālā, testēšanas vai sagatavošanās vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jauni 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 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.

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: Izvietojiet un pārbaudiet!

Mēs esam pabeiguši! Jūsu React lietojumprogramma tagad tiks automātiski tulkota, kad jūs pievienosiet jebkādas virknes Translate komponentam. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām API atslēgai būs iespēja izveidot jaunas virknes tulkošanai. Mēs iesakām izmantot slēgtu un drošu testēšanas vidi, kur varat pārbaudīt savu ražošanas lietojumprogrammu ar šādu API atslēgu, pievienojot jaunas virknes pirms izvietošanas. Tas novērsīs slēptās API atslēgas nozagšanu un potenciālu jūsu tulkojumu projekta pārslogošanu ar jauniem, nesaistītiem virknēm.

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

TacoTranslate ļauj ātri un automātiski lokalizēt jūsu React lietojumprogrammas jebkurā valodā un no tās. Sāciet jau šodien!