Kako uvesti internacionalizacijo v aplikacijo Next.js, ki uporablja Pages Router
Naredite svojo React aplikacijo bolj dostopno in dosezite nove trge z internacionalizacijo (i18n).
Ker se svet vse bolj globalizira, je 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 mednarodna podpora (i18n), ki vam omogoča prilagoditev aplikacije različnim jezikom, valutam in oblikam datuma.
V tem vodiču bomo raziskali, kako dodati mednarodno podporo vaši React Next.js aplikaciji z upoštevanjem strežniškega upodabljanja. TL;DR: Celoten primer si oglejte tukaj.
Ta vodič je za Next.js aplikacije, ki uporabljajo Pages Router.
Če uporabljate App Router, si oglejte 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 z next-intl. V tem primeru pa bomo uporabili TacoTranslate.
TacoTranslate samodejno prevaja vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobaja zamudnega upravljanja JSON datotek.
Namestimo ga preko npm v vaši terminalski konzoli:
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. Ustvari račun tukaj. Je brezplačno in ne zahteva vnosa kreditne kartice.
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
, medtem ko je read/write
ključ secret
. Na primer, lahko jih dodate v .env
datoteko v korenu vašega projekta.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Poskrbite, da skrivni ključ API-ja read/write
nikoli ne bo razkrit v produkcijskem okolju na strani odjemalca.
Dodali bomo še dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta koda jezika za povratek. V tem primeru jo bomo nastavili naen
za angleščino.TACOTRANSLATE_ORIGIN
: "Mapa", kjer bodo shranjeni vaši nizi, 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 odjemalca z uporabo API ključev iz prejšnjega koraka. 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 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 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 s takojšnjim prikazom prevedene vsebine, namesto da bi se najprej prikazala nepovedana 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 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 zdaj smo v aplikaciji Next.js nastavili le seznam podprtih jezikov. Naslednje, kar bomo naredili, je, da pridobimo prevode za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps
ali getTacoTranslateServerSideProps
glede na vaše zahteve.
Ti funkciji sprejmeta tri argumente: en objekt Next.js Static Props Context, konfiguracijo za TacoTranslate in neobvezne lastnosti Next.js. Upoštevajte, da je revalidate
pri 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 zmožni 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: Razporeditev in testiranje!
Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko dodate katerikoli niz v komponento Translate
. Upoštevajte, da bodo lahko nove nize za prevajanje ustvarjala samo okolja z dovoljenji za read/write
na API ključu. Priporočamo, da imate zaprto in zavarovano testno okolje, kjer lahko s takim API ključem preizkusite svojo produkcijsko aplikacijo in dodate nove nize pred začetkom uporabe v živo. To bo preprečilo, da bi kdorkoli ukradel vaš skrivni API ključ in s tem morebiti napihnil vaš prevajalski projekt z novimi, nepovezanimi nizi.
Poskrbite, da boste preverili celoten primer na našem profilu GitHub. Tam boste našli tudi primer, kako to narediti z uporabo App Router!. Če naletite na kakršnekoli težave, nam prosim pišite, z veseljem vam bomo pomagali.
TacoTranslate vam omogoča, da svoje React aplikacije samodejno hitro lokalizirate v katerikoli jezik in iz njega. Začnite danes!