Kako uvesti internacionalizacijo v Next.js aplikacijo, ki uporablja App Router

Ko svet postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko ustrezajo uporabnikom iz različnih držav in kultur. Eden ključnih načinov za dosego tega je internacionalizacija (i18n), ki omogoča prilagoditev vaše aplikacije različnim jezikom, valutam in formatom datuma.

V tem članku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z uporabo strežniškega upodabljanja. TL;DR: Oglejte si celoten primer tukaj.

Ta vodič je namenjen Next.js aplikacijam, ki uporabljajo App Router.
Če uporabljate Pages Router, si oglejte ta vodič.

Korak 1: Namestite i18n knjižnico

Za implementacijo internacionalizacije v vaši Next.js aplikaciji bomo najprej izbrali i18n knjižnico. Obstaja več priljubljenih knjižnic, vključno z next-intl. V tem primeru pa bomo uporabili TacoTranslate.

TacoTranslate samodejno prevede vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi dolgotrajnega upravljanja JSON datotek.

Namestimo ga z uporabo npm v vašem terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun TacoTranslate

Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj TacoTranslate račun, prevajalski projekt in povezane API ključe. Ustvarite račun tukaj. Brezplačno je in ne zahteva vnosa kreditne kartice.

V uporabniškem vmesniku aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek z njegovimi API ključi. Ustvarite en read ključ in en read/write ključ. Shranili jih bomo kot okoljske spremenljivke. read ključ imenujemo public, medtem ko je read/write ključ secret. Na primer, lahko jih dodate v .env datoteko v korenski mapi vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Prepričajte se, da nikoli ne razkrijete skrivnega read/write API ključa v produkcijskih okoljih na strani odjemalca.

Dodali bomo tudi še dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE in TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta rezerva koda jezika. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: »Mapa«, kjer bodo shranjene vaše nizi, na primer URL vaše spletne strani. Preberite več o izvorih tukaj.

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

Korak 3: Nastavitev TacoTranslate

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;

Kmalu bomo samodejno definirali TACOTRANSLATE_API_KEY in TACOTRANSLATE_PROJECT_LOCALE.

Ustvarjanje klienta v ločeni datoteki omogoča enostavno ponovno uporabo kasneje. getLocales je zgolj pripomočna funkcija z vgrajenim ravnanjem z napakami. Zdaj ustvarite datoteko z imenom /app/[locale]/tacotranslate.tsx, kjer bomo implementirali ponudnika TacoTranslate.

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

Opazite 'use client';, kar označuje, da gre za komponento na strani klienta.

Zdaj, ko je ponudnik konteksta pripravljen, ustvarite datoteko z imenom /app/[locale]/layout.tsx, glavno postavitev v naši aplikaciji. Upoštevajte, da ta pot vsebuje mapo, ki uporablja Dynamic Routes, kjer je [locale] dinamični parameter.

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

Prva stvar, ki jo je treba tukaj poudariti, je, da uporabljamo naš Dynamic Route parameter [locale] za pridobivanje prevodov za ta jezik. Poleg tega generateStaticParams zagotavlja, da so vsi jezikovni kodi, ki ste jih aktivirali za svoj projekt, vnaprej upodobljeni.

Zdaj pa naredimo našo prvo stran! Ustvarite datoteko z imenom /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!" />
	);
}

Upoštevajte spremenljivko revalidate, ki pove Next.js, naj po 60 sekundah ponovno zgradi stran in ohranja vaše prevode posodobljene.

Korak 4: Implementacija upodabljanja na strežniški strani

TacoTranslate podpira upodabljanje na strežniški strani. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto najprej trenutka nep prevedene vsebine. Poleg tega lahko na odjemalcu preskočimo omrežne zahteve, ker že imamo prevode, ki jih potrebujemo za stran, ki si jo uporabnik ogleduje.

Za nastavitev strežniškega upodabljanja ustvarite ali spremenite /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};
};

Spremenite preverjanje isProduction tako, da ustreza vaši nastavitvi. Če true, bo TacoTranslate prikazal javni ključ API. Če smo v lokalnem, preskusnem ali pripravljalnem okolju (isProduction is false), bomo uporabili skrivni ključ API read/write , da zagotovimo, da so novi nizi poslani v prevod.

Da zagotovimo, da usmerjanje in preusmerjanje delujeta kot pričakovano, bomo morali ustvariti datoteko z imenom /middleware.ts. Z uporabo Middleware lahko uporabnike preusmerimo na strani, prikazane v njihovi željeni jezikovni različici.

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

Prepričajte se, da nastavite matcher v skladu z dokumentacijo Next.js Middleware.

Na strani odjemalca lahko spremenite piškotek locale, da spremenite uporabnikov željeni jezik. Za ideje, kako to storiti, si oglejte celotno primer kode!

Korak 5: Namesti in preizkusi!

Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko boste dodali kakršne koli nize v Translate komponento. Upoštevajte, da bodo lahko le okolja z dovoljenji read/write za API ključ ustvarjala nove nize za prevajanje. Priporočamo, da imate zaprto in varno testno okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo z API ključem takšne vrste in dodajate nove nize pred javno objavo. To bo preprečilo, da bi kdo ukradel vaš skrivni API ključ in morebiti napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.

Zagotovo si oglejte celoten primer na našem GitHub profilu. Tam boste našli tudi primer, kako to narediti z uporabo Pages Router ! Če naletite na kakršne koli težave, se brez zadržkov obrnete na nas, in z veseljem vam bomo pomagali.

TacoTranslate vam omogoča, da samodejno hitro lokalizirate vaše React aplikacije v katerikoli jezik in iz njega. Začnite danes!