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

Ker se svet vse bolj globalizira, je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko služijo uporabnikom iz različnih držav in kultur. Ena ključnih poti za dosego tega je internacionalizacija (i18n), ki omogoča prilagoditev vaše aplikacije različnim jezikom, valutam in formatom datuma.

V tem vodiču bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z upoštevanjem strežniškega upodabljanja. 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ši Next.js aplikaciji bomo najprej izbrali i18n knjižnico. Obstaja več priljubljenih knjižnic, vključno s next-intl. Vendar pa bomo v tem primeru uporabili TacoTranslate.

TacoTranslate samodejno prevede vaše nize v katerikoli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi nadležnega upravljanja JSON datotek.

Namestimo ga z uporabo npm v vašem terminalu:

npm install tacotranslate

Korak 2: Ustvarite brezplačen TacoTranslate račun

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. Je brezplačen in ne zahteva vnosa kreditne kartice.

Znotraj uporabniškega vmesnika aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek za API ključe. 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 korenu vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Prepričajte se, da skrivnega ključa API read/write nikoli ne razkrijete v produkcijskih okoljih na strani odjemalca.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta varnostna koda jezika. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: "Mapa", kjer bodo shranjene vaše nizke, 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 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 ponovno uporabo kasneje. Zdaj bomo z uporabo prilagojene datoteke /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 zgornjega primera.

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: Objavi in preizkusi!

Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko boste dodali katerikoli niz besedila v Translate komponento. Upoštevajte, da bodo lahko nova besedila za prevajanje ustvarjala le okolja z dovoljenji read/write na API ključu. Priporočamo, da imate zaprto in varno testno okolje, kjer lahko preizkusite vašo produkcijsko aplikacijo s takim API ključem ter dodate nova besedila pred zagonom v živo. To bo preprečilo vsakomur krajo vašega skrivnega API ključa in morebitno napihovanje vašega prevajalskega projekta z dodajanjem novih, nepovezanih besedil.

Ne pozabite pogledati celoten primer na našem GitHub profilu. Tam boste našli tudi primer, kako to narediti z uporabo App Routera! Če naletite na kakršnekoli težave, nas prosimo 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 danes!