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

Ker se svet vse bolj globalizira, postaja za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko zadovoljijo uporabnike iz različnih držav in kultur. Eden ključnih načinov za dosego tega je internacionalizacija (i18n), ki vam omogoča prilagajanje vaše aplikacije različnim jezikom, valutam in datumskim formatom.

V tem vodiču bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z uporabo upodabljanja na strani strežnika. TL;DR: Oglejte si celoten primer tukaj.

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

1. korak: Namestite knjižnico i18n

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

TacoTranslate samodejno prevaja vaše nize v poljuben jezik z uporabo najsodobnejše umetne inteligence in vas osvobaja napornega upravljanja JSON datotek.

Namestimo ga z uporabo npm v vaši terminalski konzoli:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun TacoTranslate

Zdaj, ko imate nameščen modul, je čas, da ustvarite svoj račun 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 njegovih API ključev. Ustvarite en read ključ in en read/write ključ. Shranili jih bomo kot okoljske spremenljivke. read ključ imenujemo public, medtem ko je read/write ključ secret. Na primer, lahko jih dodate v datoteko .env v korenskem imeniku vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Poskrbite, da nikoli ne boste razkrili 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 jezika za padec nazaj. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: "Mapa", kjer bodo shranjene vaše nizi, na primer URL vaše spletne strani. Preberite več o virih tukaj.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Korak 3: Nastavitev TacoTranslate

Za integracijo TacoTranslate z vašo aplikacijo boste morali ustvariti klienta 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 klienta 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 s lastnostmi in kodo iz zgoraj navedenega.

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

TacoTranslate omogoča upodabljanje prevodov na strežniški strani. To močno izboljša uporabniško izkušnjo, saj takoj pokaže prevedeno vsebino, namesto da najprej zaznamuje neprevedeno vsebino. Poleg tega lahko pri odjemalcu preskočimo omrežne zahteve, saj že imamo vse potrebne prevode.

Začeli bomo z ustvarjanjem ali spreminjanjem datoteke /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'),
	});
};

Spremenite preverjanje isProduction tako, da ustreza vaši nastavitvi. Če true, bo TacoTranslate prikazal javni ključ API. Če smo v lokalnem, preskusnem ali pripravljalnem okolju (isProduction is false), bomo uporabili skrivni ključ API read/write , da zagotovimo, da so novi nizi poslani v prevod.

Do zdaj smo v aplikacijo Next.js nastavili le seznam podprtih jezikov. Naslednje, kar bomo naredili, je pridobitev prevodov za vse vaše strani. Za to boste uporabljali bodisi getTacoTranslateStaticProps ali getTacoTranslateServerSideProps glede na vaše zahteve.

Ti funkciji prejmeta 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, kar zagotavlja, da so vaše prevode vedno posodobljene.

Za uporabo katerekoli funkcije 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 uporabljati komponento Translate za prevajanje nizov znotraj vseh vaših React komponent.

import {Translate} from 'tacotranslate/react';

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

Korak 5: Objavi in preizkusi!

Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko boste dodali katere koli nize v komponento Translate. Upoštevajte, da bodo lahko le okolja z dovoljenji read/write za API ključ ustvarjala nove nize za prevajanje. Priporočamo, da imate zaprto in varno testno okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo z API ključem te vrste in dodajate nove nize pred objavo. To bo preprečilo, da bi kdo ukradel vaš skrivni API ključ in morebiti napolnil vaš prevajalski projekt z novimi, nepovezanimi nizi.

Zagotovo si oglejte popoln primer na našem GitHub profilu. Tam boste našli tudi primer, kako to storiti z uporabo App Router! Če naletite na kakršnekoli težave, nas brez zadržkov kontaktirajte, z veseljem vam bomo pomagali.

TacoTranslate vam omogoča hitro avtomatsko lokalizacijo vaših React aplikacij v katerikoli jezik in iz njega. Začnite še danes!