Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab App Routerit

Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistamine (i18n), mis võimaldab kohandada teie rakendust erinevate keelte, valuutade ja kuupäevavormingute jaoks.

Selles artiklis uurime, kuidas lisada rahvusvahelistamine teie React Next.js rakendusele koos serveripoolse renderdamisega. TL;DR: Vaadake kogu 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: Paigalda i18n teek

Selleks, et rakendada oma Next.js rakendusse rahvusvahelistamist, valime esmalt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.

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

Paigaldame selle npm abil oma terminalis:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate konto

Nüüd, kui sul on moodul paigaldatud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API võtmed. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja navigeeri selle API võtmed vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtit nimetame public ja read/write võtit secret-ks. Näiteks võid need lisada oma projekti juurkausta asuvasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veendu, et sa ei lekita kunagi salajast read/write API võtit kliendi poole tootmiskeskkondades.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagavarakeele kood. Selles näites määrame selle väärtuseks en ehk inglise keel.
• TACOTRANSLATE_ORIGIN: “Kaust”, kus teie tekstid salvestatakse, näiteks teie veebisaidi URL. Loe rohkem päritolu kohta siit.

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

3. samm: TacoTranslate seadistamine

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;

Me määratleme automaatselt peagi TACOTRANSLATE_API_KEY ja TACOTRANSLATE_PROJECT_LOCALE.

Kliendi loomine eraldi failis muudab selle hilisema uuesti kasutamise lihtsaks. getLocales on lihtsalt utiliitfunktsioon, millel on sisseehitatud veakäsitlus. Nüüd looge fail nimega /app/[locale]/tacotranslate.tsx, kus rakendame 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 tegemist on kliendikomponendiga.

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

Esimene asi, mida siinkohal märkida, on see, et me kasutame meie Dynamic Route parameetrit [locale] selle keele tõlgete toomiseks. Lisaks tagab generateStaticParams kõikide teie projekti jaoks aktiveeritud lokaalkoodide eelrenderdamise.

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!" />
	);
}

Pane tähele revalidate muutujat, mis ütleb Next.js-ile, et lehte tuleks uuesti ehitada 60 sekundi pärast ning hoida sinu tõlked ajakohasena.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuvades kohe tõlgitud sisu, mitte esmalt mittetõlgitud sisu välgatust. Lisaks saame kliendis võrgupäringud vahele jätta, kuna meil on juba olemas tõlked, mida kasutaja vaadatava lehe jaoks vajame.

Serveripoolse renderduse seadistamiseks loo või muuda /next.config.js faili:

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

Muutke isProduction kontrolli vastavalt oma seadistusele. Kui true, toob TacoTranslate välja avaliku API võtme. Kui oleme kohalikus, test- või lavastuskeskkonnas (isProduction is false), kasutame salajase read/write API-võtit, et veenduda, et uued stringid saadetakse tõlkimiseks.

Selleks, et marsruutimine ja ümbersuunamine toimiksid ootuspäraselt, peame looma faili nimega /middleware.ts. Kasutades Middleware, saame kasutajad suunata nende eelistatud keeles esitatavatele lehtedele.

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

Kliendipoolsel küljel saate muuta locale küpsist, et muuta kasutaja eelistatud keelt. Palun vaadake täielikku näidiskoodi, et saada ideid, kuidas seda teha!

Samm 5: Paiguta ja testi!

Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mingeid stringe Translate komponendile. Pange tähele, et ainult keskkonnad, millel on read/write õigused API võtmel, saavad luua uusi tõlgitavaid stringe. Soovitame kasutada suletud ja turvatud testkeskkonda, kus saate oma tootmisrakendust sellise API võtmega testida ning enne avalikustamist uusi stringe lisada. See takistab kellelgi varastamast teie salajast API võtit ja takistab tõlkeprojekti õhupallitamist mittevajalikelt, seotud stringidelt.

Kindlasti vaata täielikku näidet meie GitHubi profiilil. Seal leiad ka näite, kuidas seda teha, kasutades Pages Router]! Kui sul tekib probleeme, ära kõhkle meiega ühendust võtta, ja me aitame sind hea meelega.

TacoTranslate võimaldab sul oma Reacti rakendused kiiresti automaatselt kohandada mistahes keelde ja tagasi. Alusta juba täna!