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

Ker se svet vse bolj globalizira, je za spletne razvijalce vse pomembneje ustvarjati aplikacije, ki ustrezajo uporabnikom iz različnih držav in kultur. Eden od 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 s strežniškim upodabljanjem. TL;DR: Oglejte si celoten primer tukaj.

Ta vodnik je namenjen Next.js aplikacijam, ki uporabljajo Pages Router.
Če uporabljate App Router, si oglejte namesto tega 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 bomo v tem primeru uporabili TacoTranslate.

TacoTranslate samodejno prevede vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi zamudnega upravljanja JSON datotek.

Namestimo ga 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 račun TacoTranslate, prevajalski projekt in pripadajoče API ključe. Ustvarite račun tukaj. Brezplačno je in ne zahteva vnašanja podatkov o kreditni kartici.

V uporabniškem vmesniku aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek API ključev. Ustvarite en read ključ in en read/write ključ. Shranili jih bomo kot okoljske spremenljivke. read ključ imenujemo public in read/write ključ 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 strani odjemalca.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Privzeta rezervna koda lokalizacije. V tem primeru jo bomo nastavili na en za angleščino.
• TACOTRANSLATE_ORIGIN: “mapa”, kjer bodo shranjeni vaši nizi besedil, 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 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 odjemalca v ločeni datoteki olajša njegovo ponovno uporabo pozneje. Zdaj bomo v prilagojenem /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, razširite definicijo z zgoraj navedenimi lastnostmi in kodo.

Korak 4: Implementacija upodabljanja na strani strežnika

TacoTranslate omogoča upodabljanje 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, saj ž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 glede na vašo nastavitev. Če je true, bo TacoTranslate razkril javni API ključ. Če smo v lokalnem, testnem ali predprodukcijskem okolju (isProduction is false), bomo uporabili skrivni API ključ read/write, da zagotovimo, da bodo novi nizi poslani v prevod.

Do zdaj smo v Next.js aplikacijo nastavili le seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobitev prevodov za vse vaše strani. Pri tem boste glede na svoje 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 pri getTacoTranslateStaticProps privzeto nastavljen na 60, tako da bodo vaši prevodi ažurni.

Če želite uporabiti katero od funkcij na strani, predpostavimo, da imate datoteko strani, na primer /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 uporabljali 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 boste dodali kakršne koli nize v komponento Translate. 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 varno staging okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo z takšnim API ključem ter dodajate nove nize, preden greste v živo. To bo preprečilo, da bi kdorkoli kdorkoli ukradel vaš skrivni API ključ in potencialno napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.

Obvezno si oglejte 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, se obrnite na nas, z veseljem vam bomo pomagali.

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