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

Kuna maailm muutub üha globaliseeritumaks, on veebiarendajatel üha olulisem luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistamine (i18n), mis võimaldab kohandada teie rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles artiklis uurime, kuidas lisada rahvusvahelistamist teie React Next.js rakendusse koos serveripoolse renderdamisega. TL;DR: Vaadake täielikku näidet siit.

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 rakendada rahvusvahelistamist (i18n) oma Next.js'i rakenduses, valime esmalt i18n-teegi. On mitu populaarset teeki, sealhulgas next-intl. Selles näites kasutame siiski TacoTranslate.

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

Paigaldame selle, kasutades npm oma terminalis:

npm install tacotranslate

2. samm: Loo tasuta TacoTranslate konto

Nüüd, kui olete mooduli installinud, on aeg luua oma TacoTranslate 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õtit nimetame public-ks ja read/write võtit secret-ks. Näiteks võid need lisada projekti juurkausta asuvasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ärge kunagi lekitage 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 määrame selle väärtuseks en, mis tähistab inglise keelt.
• TACOTRANSLATE_ORIGIN: „kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit rohkem originite kohta.

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

3. samm: TacoTranslate'i seadistamine

TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevaid 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;

Me määrame peagi automaatselt TACOTRANSLATE_API_KEY ja TACOTRANSLATE_PROJECT_LOCALE.

Kliendi loomine eraldi faili hõlbustab selle hilisemat kasutamist. getLocales on lihtsalt abifunktsioon mõningase sisseehitatud veahaldusega. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx, kuhu me implementeerime TacoTranslate pakkuja.

'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'; — see näitab, et tegemist on kliendikomponendiga.

Nüüd, kui konteksti pakkuja on valmis, loo fail nimega /app/[locale]/layout.tsx, mis on meie rakenduse juurpaigutus. Pange tähele, et sellel teel on kaust, 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>
	);
}

Esiteks tasub märkida, et me kasutame oma Dynamic Route parameetrit [locale] antud keele tõlgete hankimiseks. Lisaks tagab generateStaticParams, et kõik teie projektis aktiveeritud lokaalkoodid 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 ütleb Next.js-ile lehte 60 sekundi järel uuesti üles ehitada ja hoida teie tõlkeid ajakohastena.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuna tõlgitud sisu kuvatakse kohe, selle asemel et esmalt näidata lühikest hetke tõlkimata sisu. Lisaks saame kliendipoolseid võrgu päringuid vahele jätta, sest meil on juba olemas tõlked, mida kasutaja vaatava lehe jaoks vajame.

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 tagada uute stringide saatmine tõlkimiseks.

Selleks, et marsruutimine ja ümbersuunamine toimiksid ootuspäraselt, peame looma faili nimega /middleware.ts. Kasutades Middleware, saame kasutajad 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);
}

Veendu, et seadistad matcher vastavalt Next.js Middleware'i dokumentatsioonile.

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

Samm 5: Juuruta ja testi!

Oleme valmis! Teie React-rakendus tõlgitakse nüüd automaatselt, kui lisate Translate komponendile mingeid stringe. Pange tähele, et uusi tõlgitavaid stringe saavad luua ainult need keskkonnad, mille API-võtmel on read/write õigused. Soovitame omada suletud ja turvatud staging-keskkonda, kus saate oma produktsioonirakendust sellise API-võtmega testida ning lisada uusi stringe enne avaldamist. See takistab kedagi teie salajast API-võtit varastamast ning aitab vältida tõlkeprojekti võimalikku ülespuhumist uute, mitteseotud stringide lisamise tõttu.

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!