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

Ker se svet vse bolj globalizira, je za spletne razvijalce vedno 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 aplikacijo različnim jezikom, valutam in oblikam datumov.

V tem vodniku 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 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 pa bomo v tem primeru uporabljali TacoTranslate.

TacoTranslate samodejno prevaja vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi dolgočasnega upravljanja datotek JSON.

Namestimo ga z uporabo npm v terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun pri 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 se pomaknite 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

Poskrbite, da skrivnega API ključa read/write nikoli ne razkrijete v produkcijskih okoljih na odjemalski strani.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta koda nadomestne lokalizacije. 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šega spletnega mesta. Več o izvorih najdete 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 pozneje. 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 prilagojena pageProps in _app.tsx, razširite definicijo z zgoraj prikazanimi lastnostmi in kodo.

Korak 4: Implementacija upodabljanja na strežniku

TacoTranslate omogoča upodabljanje vaših prevodov na strežniku. To močno izboljša uporabniško izkušnjo, saj prikaže prevedeno vsebino takoj, namesto da bi se najprej prikazala neprevedena vsebina. 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, da ustreza vaši nastavitvi. Če je true, bo TacoTranslate uporabil 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.

Do zdaj smo v aplikaciji Next.js nastavili le seznam podprtih jezikov. Naslednji korak bo pridobitev prevodov 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 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 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 lahko 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čali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko dodate kakršne koli nize v komponento Translate. Upoštevajte, da bodo le okolja, ki imajo dovoljenja read/write za API ključ, lahko ustvarila nove nize za prevajanje. Priporočamo, da imate zaprto in zavarovano staging okolje, kjer lahko s takim API ključem preizkusite svojo produkcijsko aplikacijo in pred objavo dodajate nove nize. To bo preprečilo, da bi kdorkoli kdorkoli ukradel vaš skrivni API ključ in s tem potencialno napihnil vaš projekt prevodov z dodajanjem novih, nepovezanih nizov.

Ne pozabite si ogledati celoten primer na našem GitHub profilu. Tam boste našli tudi primer, kako to narediti z uporabo App Router! Če naletite na težave, nas kontaktirajte, z veseljem vam bomo pomagali.

TacoTranslate vam omogoča hitro samodejno lokalizacijo vaših React aplikacij v več kot 75 jezikov in iz njih. Začnite še danes!