Kako uvesti internacionalizacijo v aplikacijo Next.js, ki uporablja Pages Router

Ker se svet vse bolj globalizira, je za spletne razvijalce vse pomembneje ustvarjati aplikacije, ki so prilagojene uporabnikom 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 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 oglejte raje ta vodič.

Korak 1: Namestite knjižnico i18n

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 prevede vaše nize v poljuben jezik z uporabo najnovejše umetne inteligence in vas osvobodi dolgočasnega upravljanja JSON datotek.

Namestimo jo z uporabo npm v vašem terminalu:

npm install tacotranslate

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

Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj račun TacoTranslate, prevajalski projekt in pripadajoče API ključe. Ustvarite račun tukaj. Brezplačno je in ne zahteva vnosa številke 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č. Shranili jih bomo kot spremenljivke okolja. Ključ read imenujemo public, ključ read/write pa je secret. Na primer, jih lahko dodate v datoteko .env v korenu vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Poskrbite, 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 jezika, ki se uporabi kot rezervna. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: »mapa«, kjer bodo shranjeni vaši nizi, na primer URL vaše spletne strani. Preberite več o originah 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 kasnejšo ponovno uporabo. 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, navedenima zgoraj.

Korak 4: Implementacija upodabljanja na strežniku

TacoTranslate omogoča strežniško upodabljanje vaših prevodov. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto da se najprej pojavi utrip neprevedene vsebine. Poleg tega se lahko izognemo omrežnim zahtevam na odjemalcu, ker že imamo vse prevode, ki jih potrebujemo.

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 prikazal javni API ključ. Če smo v lokalnem, testnem ali predprodukcijskem okolju (isProduction is false), bomo uporabili skrivni API ključ read/write, da bodo novi nizi poslani v prevod.

Do zdaj smo v Next.js aplikaciji nastavili le seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobitev prevodov za vse vaše strani. Pri tem boste glede na vaše zahteve uporabili bodisi getTacoTranslateStaticProps bodisi 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 na strani uporabiti katero koli od teh funkcij, 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 lahko uporabite 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: Namestite in preizkusite!

Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko v komponento Translate dodate poljubne 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 testno (staging) okolje, kjer lahko svojo produkcijsko aplikacijo preizkusite z takšnim API ključem in pred objavo v živo dodate nove nize. S tem se boste izognili morebitni kraji vašega skrivnega API ključa in posledičnemu napihovanju prevajalskega projekta z dodajanjem novih, nepovezanih nizov.

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

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