Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab App Router-i

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

Selles artiklis uurime, kuidas lisada rahvusvahelistumine 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.

1. samm: Paigalda i18n teek

Selleks, et oma Next.js rakenduses rahvusvahelistumist rakendada, valime esmalt i18n teegid. On mitmeid populaarseid teeke, sealhulgas next-intl. Selles näites kasutame aga TacoTranslate.

TacoTranslate tõlgib sinu tekstid automaatselt ükskõik millisesse keelde, kasutades tipptasemel tehisintellekti, ning vabastab sind JSON-failide tüütust haldamisest.

Paigaldame selle terminalis kasutades npm:

npm install tacotranslate

2. samm: 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 liigu selle API keys vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtit kutsume public ja read/write võtit secret-ks. Näiteks võid need lisada projekti juurkaustas 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 kliendipoolsetesse tootmiskeskkondadesse.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varukoha keelekood. 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 siit rohkem päritolude kohta.

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

3. samm: TacoTranslate seadistamine

TacoTranslate’i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt saadud 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 failis teeb selle hiljem lihtsasti uuesti kasutatavaks. getLocales on lihtsalt abifunktsioon mõne sisseehitatud veakäsitlusega. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx, kus me rakendame TacoTranslate provideri.

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

Pane tähele 'use client';, mis näitab, et tegemist on kliendikomponendiga.

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 siin tähele panna, on see, et me kasutame oma Dynamic Route parameetrit [locale] selle keele tõlgete toomiseks. Lisaks tagab generateStaticParams, et kõik teie projekti jaoks aktiveeritud keelerekoodid on eelkuvatud.

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 ehitada leht uuesti 60 sekundi pärast ning hoida sinu tõlked ajakohasena.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuvades koheselt tõlgitud sisu, selle asemel et esmalt näidata lühikest lahtita tõlgitud sisu vilkumist. Lisaks saame kliendipoolseid võrgupäringuid vahele jätta, kuna meil on juba olemas tõlked sellel vaadataval lehel.

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, kuvab TacoTranslate avaliku API võtme. Kui 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 tagada marsruutimine ja suunamine toimivad ootuspäraselt, peame looma faili nimega /middleware.ts. Kasutades Middleware, saame kasutaja suunata lehtedele tema 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 dokumentatsioonile.

Kliendi poolel saate muuta locale küpsist, et muuta kasutaja eelistatud keelt. Ideede saamiseks vaadake palun täielikku näidiskoodi!

Samm 5: Rakenda ja testi!

Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mingi stringi Translate komponendile. Pange tähele, et ainult keskkonnad, millel on read/write õigused API võtmele, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame kasutada suletud ja turvalist testkeskkonda, kus saate testida oma tootmiskeskkonna rakendust sellise API võtmega, lisades enne avaldamist uusi stringe. See hoiab ära kellegi teise võimaluse varastada teie salajast API võtit ja potentsiaalselt paisutada 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!