Najboljša rešitev za internacionalizacijo (i18n) v Next.js aplikacijah

Kako deluje

Ko svet postaja bolj globaliziran, postaja za spletne razvijalce vedno pomembneje, da ustvarjajo aplikacije, ki lahko zadovoljujejo uporabnike iz različnih držav in kultur. Eden ključnih načinov za to je internacionalizacija (i18n), ki vam omogoča prilagoditev vaše aplikacije različnim jezikom, valutam in oblikam datumov.

V tem vodniku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji s prikazom na strežniški strani. TL;DR: Oglejte si celoten primer tukaj.

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

1. korak: 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 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 umetne inteligence in vas osvobodi mučnega upravljanja JSON datotek.

Pojdimo ga namestiti z uporabo 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 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 se pomaknite do zavihka z API ključi. Ustvarite en read ključ in en read/write ključ. Shranili ju bomo kot okoljske spremenljivke. read ključ imenujemo public (javni), medtem ko je read/write ključ secret (zasebni). Na primer, lahko ju dodate v datoteko .env v korenski mapi vašega projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Poskrbite, da nikoli ne razkrijete 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 odzivne jezikovne različice. V tem primeru jo nastavimo na en za angleščino.
• TACOTRANSLATE_ORIGIN: "Mapa", kjer bodo shranjene vaše besedilne nize, na primer URL vašega spletnega mesta. Več o izvorih preberite tukaj.

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

Korak 3: Nastavitev TacoTranslate

Če želite integrirati TacoTranslate s svojo aplikacijo, boste morali ustvariti odjemalca z uporabo prejšnjih ključev API. Ustvarite na primer 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 pozneje. 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 z lastnostmi in kodo iz zgornjega.

Korak 4: Implementacija upodabljanja na strani strežnika

TacoTranslate omogoča upodabljanje prevodov na strežniški strani. To bistveno izboljša uporabniško izkušnjo, saj prikaže prevedeno vsebino takoj, namesto da bi najprej prikazal utrinek neprevedene vsebine. Poleg tega lahko na odjemalcu preskočimo omrežne zahtevke, ker že imamo vse potrebne prevode.

Začeli bomo s kreiranjem 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 Next.js aplikaciji nastavili le seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobitev prevodov za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps ali getTacoTranslateServerSideProps glede na vaše zahteve.

Te funkcije sprejmejo tri argumente: en Next.js Static Props Context objekt, konfiguracijo za TacoTranslate in nekatere opcijske Next.js lastnosti. Upoštevajte, da je revalidate pri getTacoTranslateStaticProps privzeto nastavljen na 60, tako da so vaše prevode vedno posodobljene.

Da uporabite katerokoli funkcijo 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 aplikacija Next.js bo sedaj samodejno prevedena, ko dodate katerikoli niz v komponento Translate. Upoštevajte, da bodo lahko nove nize za prevajanje ustvarila samo okolja s pristojnostmi read/write na API ključu. Priporočamo, da imate zaprto in varno preizkusno okolje, kjer lahko testirate 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 s tem morebiti napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.

Zagotovo si oglejte celoten primer na našem profilu GitHub. Tam boste našli tudi primer, kako to storiti z uporabo App Router! Če naletite na kakršne koli težave, nam prosim pišite, z veseljem vam bomo pomagali.

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