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

Kako deluje

Ko svet postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje, da ustvarijo aplikacije, ki lahko zadovoljujejo potrebe uporabnikov iz različnih držav in kultur. Eden ključnih načinov za to je internacionalizacija (i18n), ki vam omogoča prilagoditi aplikacijo različnim jezikom, valutam in formatom datumov.

V tem vodiču bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji s strežniškim upodabljanjem. TL;DR: Oglejte si celoten primer tukaj.

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

Korak 1: Namestite knjižnico i18n

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

TacoTranslate samodejno prevede vaše nize v kateri koli jezik s pomočjo najsodobnejše umetne inteligence in vas osvobodi zamudnega upravljanja JSON datotek.

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 aplikacije TacoTranslate ustvarite projekt in odprite zavihek API ključev. Ustvarite en read ključ in en read/write ključ. Shranjevali 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

Ne razkrivajte nikoli skrivnega read/write API ključa v produkcijskih okoljih na strani odjemalca.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta koda nadomestne lokalizacije. V tem primeru jo nastavimo na en za angleščino.
• TACOTRANSLATE_ORIGIN: “mapa”, kjer 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 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 kasnejšo ponovno uporabo. Zdaj bomo z uporabo prilagojenega /pages/_app.tsx dodali TacoTranslate ponudnika.

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 zgoraj navedenimi lastnostmi in kodo.

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

TacoTranslate omogoča upodabljanje vaših prevodov na strežniku. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto začetnega prikaza neprevedene vsebine. Poleg tega lahko na odjemalcu preskočimo omrežne zahteve, ker ž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 predprodukcijskem okolju (isProduction is false), bomo uporabili skrivni read/write API ključ, da zagotovimo, da se novi nizi pošljejo v prevod.

Doslej smo v aplikacijo Next.js nastavili le seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobitev prevodov za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps ali getTacoTranslateServerSideProps, odvisno od vaših zahtev.

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

Če želite katero od funkcij uporabiti 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 lahko uporabljali 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čali smo! Vaša Next.js aplikacija bo zdaj samodejno prevedena, ko v komponento Translate dodate kakršnekoli nize. Upoštevajte, da bodo le okolja z dovoljenji read/write na API ključu lahko ustvarjala nove nize za prevod. Priporočamo, da imate zaprto in zavarovano staging okolje, kjer lahko s takšnim API ključem preizkusite svojo produkcijsko aplikacijo in dodate nove nize pred objavo. To bo preprečilo, da bi kdorkoli kdorkoli ukradel vaš skrivni API ključ in s tem morebiti napihnil 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!