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

Kako deluje

Ker se svet vse bolj globalizira, je za spletne razvijalce vse pomembneje ustvarjati aplikacije, ki lahko zadostijo uporabnikom iz različnih držav in kultur. Eden ključnih načinov za to je internacionalizacija (i18n), ki vam omogoča, da prilagodite svojo aplikacijo različnim jezikom, valutam in formatom datumov.

V tem vodiču bomo raziskali, kako dodati internacionalizacijo v vašo React Next.js aplikacijo z upodabljanjem 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 i18n knjižnico

Za uvedbo internacionalizacije (i18n) 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 prevede vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi zamudnega upravljanja datotek JSON.

Namestimo ga z uporabo npm v vašem terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun na 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. Brezplačno je in ne zahteva vnosa kreditne kartice.

V uporabniškem vmesniku 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. read ključ je tisto, čemur rečemo public in read/write ključ je secret. Na primer, lahko jih dodate v .env datoteko v korenu vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Poskrbite, da skrivnega API ključa read/write nikoli ne razkrijete v produkcijskem okolju na strani odjemalca.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta koda lokalizacije, ki se uporabi kot rezervna. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: “mapa”, v kateri bodo shranjeni vaši 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

Za integracijo TacoTranslate v vašo aplikacijo boste morali ustvariti odjemalca z uporabo prej navedenih 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, razširite definicijo z lastnostmi in kodo iz zgornjega primera.

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

TacoTranslate omogoča upodabljanje prevodov na strežniku. To močno izboljša uporabniško izkušnjo, saj se prevedena vsebina prikaže takoj, namesto da bi se najprej kratko pojavila neprevedena vsebina. Poleg tega se lahko na odjemalcu izognemo mrežnim zahtevam, saj že imamo vse potrebne prevode.

Začeli bomo z ustvarjanjem ali spreminjanjem /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 glede na vašo nastavitev. Č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 Next.js aplikacijo nastavili le z naborom podprtih jezikov. Kot naslednje bomo pridobili prevode za vse vaše strani. Za to boste glede na vaše zahteve uporabili bodisi getTacoTranslateStaticProps ali getTacoTranslateServerSideProps.

Te funkcije sprejmejo tri argumente: en Next.js Static Props Context objekt, konfiguracijo za TacoTranslate in izbirne Next.js lastnosti. Upoštevajte, da je revalidate na getTacoTranslateStaticProps privzeto nastavljen na 60, tako da so vaši prevodi ažurni.

Če želite uporabiti katero od funkcij na strani, predpostavimo, da imate datoteko strani, kot je /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 biti sposobni uporabiti komponento Translate za prevajanje nizov v vseh vaših React komponentah.

import {Translate} from 'tacotranslate/react';

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

Korak 5: Razmestite in preizkusite!

Končano! Vaša Next.js aplikacija bo zdaj samodejno prevedena, ko v komponento Translate dodate kateri koli niz besedila. Upoštevajte, da bodo nove nize, ki jih je treba prevesti, lahko ustvarila le okolja, ki imajo za API ključ dovoljenja read/write. Priporočamo, da imate zaprto in zavarovano staging okolje, v katerem lahko s takim API ključem preizkusite svojo produkcijsko aplikacijo in dodajate nove nize pred objavo. To bo preprečilo, da bi kdorkoli ukradel vaš skrivni API ključ in s tem morebiti napihnil vaš prevajalski projekt z novimi, nepovezanimi nizi.

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!