Kako implementirati internacionalizacijo v Next.js aplikaciji, ki uporablja App Router

S svetom, ki postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko ustrezajo uporabnikom iz različnih držav in kultur. Ena ključnih poti do tega je internacionalizacija (i18n), ki vam omogoča prilagoditev vaše aplikacije različnim jezikom, valutam in formatom datumov.

V tem članku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji s podporo strežniškega upodabljanja. TL;DR: Tu si oglejte celoten primer.

Ta vodič je za aplikacije Next.js, 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. Vendar pa bomo v tem primeru uporabili TacoTranslate.

TacoTranslate samodejno prevaja vaše nize v katerikoli jezik z uporabo najsodobnejše umetne inteligence in vas osvobaja utrujajočega upravljanja JSON datotek.

Namestimo ga s pomočjo 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 pripadajoče API ključe. Ustvarite račun tukaj. Je brezplačno in ne zahteva vnosa kreditne kartice.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta rezervna 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šega spletnega mesta. Preberite več o izvorih tukaj.

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

Korak 3: Nastavitev TacoTranslate

Za integracijo TacoTranslate z vašo aplikacijo boste morali ustvariti klienta z uporabo API ključev iz prejšnjega koraka. Na primer, ustvarite datoteko z imenom /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;

Bomo samodejno definirali TACOTRANSLATE_API_KEY in TACOTRANSLATE_PROJECT_LOCALE kmalu.

Ustvarjanje odjemalca v ločeni datoteki omogoča enostavno ponovno uporabo kasneje. getLocales je le pomožna funkcija z nekaj vgrajenega ravnanja z napakami. Zdaj ustvari datoteko z imenom /app/[locale]/tacotranslate.tsx, kjer bomo implementirali TacoTranslate ponudnika.

'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 odjemalca.

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 tukaj treba opaziti, je, da uporabljamo naš parameter Dynamic Route [locale] za pridobivanje prevodov za ta jezik. Poleg tega generateStaticParams poskrbi, da so vsi jezikovni kodi, ki ste jih aktivirali za svoj projekt, vnaprej upodobljeni.

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

Opazite spremenljivko revalidate, ki Next.js sporoča, naj ponovno izgradi stran po 60 sekundah in tako ohrani vaše prevode ažurne.

4. korak: Implementacija izvajanja na strani strežnika

TacoTranslate podpira upodabljanje na strežniški strani. To bistveno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto da bi se najprej prikazal utrip neprevedene vsebine. Poleg tega lahko na odjemalcu preskočimo mrežne zahteve, ker že imamo prevode, ki jih potrebujemo za stran, ki jo uporabnik trenutno gleda.

Za nastavitev upodabljanja na strežniški strani 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 pravilno delovanje usmerjanja in preusmerjanja, bomo morali ustvariti datoteko z imenom /middleware.ts. Z uporabo Middleware lahko preusmerimo uporabnike na strani, prikazane v njihovem želenem jeziku.

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

Poskrbite, da boste matcher nastavili v skladu z dokumentacijo Next.js Middleware.

Na odjemalcu lahko spremenite piškotek locale, da spremenite uporabnikov prednostni jezik. Za ideje, kako to storiti, si oglejte celoten primer kode!

Korak 5: Razporedi in preizkusi!

Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko dodate katerikoli niz v komponento Translate. Upoštevajte, da bodo lahko nova besedila za prevod ustvarjala le okolja z dovoljenji read/write na API ključu. Priporočamo, da imate zaprto in zavarovano testno okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo s takšnim API ključem in dodajate nove nize pred objavo. S tem boste preprečili komurkoli, da bi ukradel vaš skrivni API ključ in s tem morebiti napihnil vaš projekt prevodov z dodajanjem novih, nepovezanih nizov.

Ne pozabite preveriti popoln primer na našem profilu GitHub. Tam boste našli tudi primer, kako to narediti z uporabo Pages Router ! Če naletite na kakršnekoli težave, nam prosim pišite, z veseljem vam bomo pomagali.

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