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

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

Selles artiklis uurime, kuidas lisada rahvusvahelistumine oma React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaadake 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 oma Next.js-rakendusse lisada rahvusvahelistumine (i18n), valime esmalt i18n-teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Käesolevas näites kasutame aga TacoTranslate.

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

Paigaldame selle oma terminalis, kasutades npm:

npm install tacotranslate

2. samm: Loo tasuta TacoTranslate'i konto

Nüüd, kui sul on moodul installitud, 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'i rakenduse kasutajaliideses loo projekt ja mine selle API‑võtmete vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võti on see, mida me nimetame public ning read/write võti on secret. Näiteks võid need lisada projekti juurkausta asuvasse faili .env.

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 määrame selle väärtuseks en (inglise keele jaoks).
• TACOTRANSLATE_ORIGIN: „Kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originide kohta 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 eelpool 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;

Me määrame TACOTRANSLATE_API_KEY ja TACOTRANSLATE_PROJECT_LOCALE varsti automaatselt.

Kliendi loomine eraldi faili teeb selle hiljem uuesti kasutamise lihtsaks. getLocales on lihtsalt utiliitfunktsioon, millel on sisseehitatud veakäitlus. Loo nüüd 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';, mis näitab, et see on kliendipoolne komponent.

Nüüd, kui konteksti pakkuja on valmis, loo fail nimega /app/[locale]/layout.tsx, mis on meie rakenduse juurpaigutus. Pane 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 tasub märkida, et me kasutame oma Dynamic Route parameetrit [locale], et pärida selle keele tõlkeid. Lisaks tagab generateStaticParams, et kõik lokaalikoodid, mille olete oma projektis aktiveerinud, on eel-renderdatud.

Nüüd loome 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, et ta ehitaks lehe uuesti 60 sekundi pärast ja hoiaks teie tõlked ajakohasena.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, sest tõlgitud sisu kuvatakse kohe, selle asemel et alguses ilmuks lühiajaliselt tõlkimata sisu. Lisaks saame kliendipoolsed võrgupäringud vahele jätta, kuna meil on juba sellel lehel vajaminevad tõlked olemas.

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 kontroll vastavalt oma seadistusele. Kui true, näitab TacoTranslate avalikku API-võtit. Kui oleme lokaalses, test- või staging-keskkonnas (isProduction is false), kasutame uute stringide tõlkimiseks salajast read/write API-võtit.

Et tagada, et marsruutimine ja ümber suunamine toimivad ootuspäraselt, peame looma faili nimega /middleware.ts. Kasutades Middleware, saame kasutajaid suunata lehtedele, mis on kuvatud 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 matcher oleks seadistatud vastavalt Next.js Middleware dokumentatsioonile.

Kliendipoolsel küljel saate muuta locale küpsist, et määrata kasutaja eelistatud keel. Palun vaadake ideede saamiseks täielikku näidiskoodi!

Samm 5: Juuruta ja testi!

Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mõne stringi Translate komponendile. Pange tähele, et ainult keskkonnad, millel on API-võtmel read/write õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame omada suletud ja turvatud staging-keskkonda, kus saate testida oma tootmisrakendust sellise API-võtmega ning lisada uusi stringe enne avalikuks minekut. See takistab kedagi teie salajast API-võtit varastamast ning takistab potentsiaalselt ka tõlkeprojekti paisumist 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!