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

S svetom, ki postaja vedno bolj globaliziran, je za spletne razvijalce vse pomembneje, da izdelajo 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 prilagoditev vaše aplikacije različnim jezikom, valutam in oblikam datumov.

V tem vodiču bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z upoštevanjem prikaza 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 raje ta vodič.

Korak 1: Namestite i18n knjižnico

Za implementacijo internacionalizacije v vašo Next.js aplikacijo 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 AI tehnologije in vas osvobodi dolgotrajnega upravljanja JSON datotek.

Namestimo ga preko npm v vašem terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen račun 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 pojdite na zavihek z API ključi. 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 korenski mapi vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Poskrbite, da skrivni read/write API ključ nikoli ne bo razkrit v produkcijskih okoljih na strani odjemalca.

Dodali bomo tudi dve dodatni okoljski spremenljivki: TACOTRANSLATE_DEFAULT_LOCALE in TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta koda jezikovne različice za nazaj. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: »Mapa«, v kateri bodo shranjene vaše nizi, na primer URL vašega spletnega mesta. 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 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 določili TACOTRANSLATE_API_KEY.

Ustvarjanje klienta v ločeni datoteki olajša ponovno uporabo kasneje. Zdaj bomo z uporabo po meri izdelanega /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 iz zgoraj.

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 prikaže prevedeno vsebino, namesto da bi se sprva pojavil blisk neprevedene vsebine. Poleg tega lahko preskočimo mrežne zahteve na strani odjemalca, ker ž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'),
	});
};

Prilagodite preverjanje isProduction glede na vašo nastavitve. Če je true, bo TacoTranslate uporabil javni API ključ. Če smo v lokalnem, testnem ali predprodukcijskem okolju (isProduction is false), bomo uporabljali skrivni read/write API ključ, da zagotovimo pošiljanje novih nizov za prevod.

Do sedaj smo v aplikaciji Next.js nastavili le seznam podprtih jezikov. Naslednje, kar bomo naredili, je pridobitev prevodov za vse vaše strani. Za to boste uporabili 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 opcijske Next.js lastnosti. Upoštevajte, da je revalidate na getTacoTranslateStaticProps privzeto nastavljen na 60, da bodo vaše prevode vedno posodobljene.

Za uporabo katere koli 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 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 boste dodali katere koli nize v komponento Translate. Upoštevajte, da bodo lahko nove nize za prevod ustvarjala le okolja z dovoljenji read/write za API ključ. Priporočamo, da imate zaprto in varno preizkusno (staging) okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo z API ključem tega tipa, tako da dodajate nove nize pred dejanskim zagonom. S tem boste preprečili, da bi kdorkoli ukradel vaš skrivni API ključ in morebiti napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.

Ne pozabite pogledati celoten primer na našem GitHub profilu. Tam boste našli tudi primer, kako to narediti z uporabo App Router![ Če naletite na kakršnekoli težave, nas lahko brez zadržkov kontaktirate, z veseljem vam bomo pomagali.

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