Najboljša rešitev za internacionalizacijo (i18n) v Next.js aplikacijah

Kako deluje

Ker se svet vse bolj globalizira, je za spletne razvijalce vse pomembneje ustvarjati aplikacije, ki lahko zadovoljijo uporabnike iz različnih držav in kultur. Eden ključnih načinov za to je internacionalizacija (i18n), ki vam omogoča prilagoditi vašo aplikacijo različnim jezikom, valutam in oblikam datumov.

V tem vodniku bomo raziskali, kako dodati internacionalizacijo v vašo React Next.js aplikacijo z renderiranjem na strežniku. TL;DR: Oglejte si celoten primer tukaj.

Ta vodič je za Next.js aplikacije, ki uporabljajo Pages Router.
Če uporabljate App Router, si namesto tega oglejte ta vodič.

Korak 1: Namestite knjižnico i18n

Za uvedbo internacionalizacije v vašo Next.js aplikacijo 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 prevede vaše nize v poljuben jezik z uporabo najsodobnejše umetne inteligence ter vas osvobodi napornega upravljanja JSON datotek.

Namestimo ga z uporabo npm v vašem terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun pri TacoTranslate

Zdaj, ko ste namestili modul, je čas, da ustvarite račun za TacoTranslate, 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 API ključev. Ustvarite en read ključ in en read/write ključ. Shranili jih bomo kot okoljske spremenljivke. Ključ read imenujemo public, ključ read/write pa je 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 read/write API ključa nikoli ne razkrijete v produkcijskih okoljih na strani odjemalca.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta koda nadomestnega jezika. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: “mapa”, kjer bodo shranjena vaša besedila, 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

Za integracijo TacoTranslate v vašo aplikacijo boste morali ustvariti odjemalca z uporabo prej omenjenih API ključev. 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Kmalu bomo samodejno definirali TACOTRANSLATE_API_KEY.

Ustvarjanje odjemalca v ločeni datoteki olajša njegovo ponovno uporabo kasneje. Zdaj bomo z uporabo prilagojenega /pages/_app.tsx dodali ponudnika TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Če že imate prilagojene pageProps in _app.tsx, prosimo, razširite definicijo z lastnostmi in kodo, prikazanima zgoraj.

4. korak: Implementacija upodabljanja na strežniku

TacoTranslate omogoča upodabljanje prevodov na strežniški strani. To močno izboljša uporabniško izkušnjo, saj prikaže prevedeno vsebino takoj, namesto da bi se najprej pojavila neprevedena vsebina. Poleg tega lahko na strani odjemalca preskočimo omrežne zahteve, ker že imamo vse potrebne prevode.

Začeli bomo z ustvarjanjem ali urejanjem /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Prilagodite preverjanje isProduction tako, da ustreza vaši nastavitvi. Če je true, bo TacoTranslate prikazal javni API ključ. Če smo v lokalnem, testnem ali staging okolju (isProduction is false), bomo uporabili skrivni read/write API ključ, da zagotovimo, da se novi nizi pošljejo v prevod.

Do zdaj smo aplikacijo Next.js nastavili le z seznamom podprtih jezikov. Nato bomo pridobili prevode za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps ali getTacoTranslateServerSideProps glede na vaše potrebe.

Te funkcije sprejmejo tri argumente: en Next.js Static Props Context objekt, konfiguracijo za TacoTranslate in neobvezne Next.js lastnosti. Upoštevajte, da je revalidate na getTacoTranslateStaticProps privzeto nastavljen na 60, tako da bodo vaši prevodi vedno posodobljeni.

Če želite uporabiti katero koli od teh funkcij na strani, predpostavimo, da imate datoteko strani, na primer /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Zdaj bi morali lahko uporabili komponento Translate za prevajanje nizov v vseh svojih React komponentah.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Korak 5: Namestite in preizkusite!

Končali smo! Vaša Next.js aplikacija bo sedaj samodejno prevedena, ko dodate katerikoli niz v komponento Translate. Upoštevajte, da bodo lahko ustvarjali nove nize za prevod le okolja z dovoljenji read/write na API ključu. Priporočamo, da imate zaprto in zavarovano staging okolje, kjer lahko s takim API ključem preizkusite produkcijsko aplikacijo in dodate nove nize pred objavo. To bo preprečilo, da bi kdo ukradel vaš skrivni API ključ in s tem potencialno obremenilo vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.

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 App 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!