Kuidas rakendada internatsionaliseerimist Next.js rakenduses, mis kasutab App Router

Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on internatsionaliseerimine (i18n), mis võimaldab kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles artiklis vaatleme, kuidas lisada internatsionaliseerimist oma React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaata täielikku näidet siin.

See juhend on mõeldud Next.js rakendustele, mis kasutavad App Router.
Kui kasutate Pages Router, vaadake selle asemel seda juhendit.

Samm 1: Paigaldage i18n-teek

Selleks, et teie Next.js-rakendusse rahvusvahelistamist (i18n) rakendada, valime esmalt i18n-teegi. Saadaval on mitmeid populaarseid teeke, sealhulgas next-intl. Selles näites kasutame siiski TacoTranslate.

TacoTranslate tõlgib teie stringid automaatselt mis tahes keelde, kasutades tipptasemel tehisintellekti, ning vabastab teid JSON-failide tüütust haldamisest.

Paigaldame selle terminalis, kasutades npm:

npm install tacotranslate

2. samm: Loo tasuta TacoTranslate konto

Nüüd, kui olete mooduli installinud, on aeg luua oma TacoTranslate'i konto, tõlkeprojekt ja sellega seotud API-võtmed. Loo konto siit. See on tasuta ja ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu selle API võtmete vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtme nimetame publicks ja read/write võtme nimetame secretks. Näiteks võid need lisada projekti juurkausta olevasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veenduge, et te ei lekita kunagi salajast read/write API-võtit kliendipoolsetesse tootmiskeskkondadesse.

Lisame ka kaks täiendavat keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varulokaali kood. Selles näites seame selle väärtuseks en (inglise keel).
• TACOTRANSLATE_ORIGIN: “kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originitest lähemalt siit.

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

3. samm: TacoTranslate'i seadistamine

TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades varem mainitud API-võtmeid. Näiteks looge fail nimega /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;

Peagi määrame automaatselt TACOTRANSLATE_API_KEY ja TACOTRANSLATE_PROJECT_LOCALE.

Kliendi loomine eraldi faili muudab selle hiljem uuesti kasutamise lihtsaks. getLocales on lihtsalt abifunktsioon, millel on sisseehitatud veakäsitlus. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx, kuhu me rakendame TacoTranslate pakkujat.

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

Pange tähele 'use client'; mis näitab, et tegemist on kliendi komponendiga.

Kui kontekstipakkuja on nüüd valmis, loo fail nimega /app/[locale]/layout.tsx, mis on meie rakenduse juurpaigutus. Pange tähele, et see tee sisaldab kausta, mis kasutab Dynamic Routes, kus [locale] on dünaamiline parameeter.

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

Kõigepealt tuleb märkida, et me kasutame oma Dynamic Route parameetrit [locale] selle keele tõlgete pärimiseks. Lisaks tagab generateStaticParams, et kõik teie projekti jaoks aktiveeritud lokaalikoodid on eelrenderdatud.

Nüüd ehitame oma esimese lehe! Loo fail nimega /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!" />
	);
}

Pange tähele revalidate muutujat, mis käsib Next.js-i lehe 60 sekundi järel uuesti üles ehitada ja hoiab teie tõlked ajakohastena.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, kuvades tõlgitud sisu kohe, selle asemel, et esmalt kuvada hetkeks tõlkimata sisu. Lisaks saame kliendipoolseid võrgupäringuid vahele jätta, kuna meil on juba olemas tõlked lehe jaoks, mida kasutaja parasjagu vaatab.

Serveripoolse renderdamise seadistamiseks loo või muuda /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};
};

Muuda isProduction kontrolli vastavalt oma seadistusele. Kui true, kuvab TacoTranslate avaliku API-võtme. Kui me oleme lokaalses, test- või staging-keskkonnas (isProduction is false), kasutame salajast read/write API-võtit, et veenduda, et uued stringid saadetakse tõlkimiseks.

Et tagada, et marsruutimine ja ümbersuunamised töötavad ootuspäraselt, peame looma faili nimega /middleware.ts. Kasutades Middleware, saame kasutajaid ümber suunata lehtedele, mis on esitatud nende eelistatud keeles.

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

Veenduge, et seadistate matcher vastavalt Next.js Middleware'i dokumentatsioonile.

Kliendipoolselt saate muuta locale küpsist, et muuta kasutaja eelistatud keelt. Vaadake täielikku näitekoodi, et saada ideid, kuidas seda teha!

5. samm: Juuruta ja testi!

Valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate komponendile. Pange tähele, et ainult keskkonnad, millel on API-võtme jaoks read/write õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame omada suletud ja turvatud staging-keskkonda, kus saate sellise API-võtmega oma tootmisrakendust testida ning enne avalikustamist uusi stringe lisada. See hoiab ära, et keegi varastaks teie salajase API-võtme ja potentsiaalselt paisutaks teie tõlkeprojekti, lisades uusi, mitteseotud stringe.

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!