Kako implementirati internacionalizacijo v Next.js aplikaciji, ki uporablja Pages Router
Naredite svojo React aplikacijo bolj dostopno in dosežite nove trge z internacionalizacijo (i18n).
Ker svet postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje graditi aplikacije, ki lahko ustrezajo uporabnikom iz različnih držav in kultur. Eden ključnih načinov za dosego tega je internacionalizacija (i18n), ki vam omogoča prilagoditi vašo aplikacijo različnim jezikom, valutam in oblikam prikaza datumov.
V tem vodiču bomo raziskali, kako dodati internacionalizacijo v vašo React Next.js aplikacijo z upodabljanjem na strežniku (server-side rendering). TL;DR: Oglejte si celoten primer tukaj.
Ta vodič je za Next.js aplikacije, ki uporabljajo Pages Router.
Če uporabljate App Router, si namesto tega oglejte 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 pa bomo v tem primeru uporabili TacoTranslate.
TacoTranslate samodejno prevede vaše nize v kateri koli jezik z uporabo najsodobnejše AI in vas osvobodi zamudnega upravljanja z JSON datotekami.
Namestimo jo z uporabo npm v vašem terminalu:
npm install tacotranslate
Korak 2: Ustvarite brezplačen račun na 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. Brezplačno je 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č. Shranjevali jih bomo kot okoljske spremenljivke. Ključ read
imenujemo public
, ključ read/write
pa 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 skrivni read/write
API ključ nikoli ne bo razkrit v produkcijskih okoljih na odjemalčevi strani.
Prav tako bomo dodali še dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta koda jezika (fallback). V tem primeru jo nastavimo 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 v vašo aplikacijo boste morali ustvariti odjemalca z uporabo prej ustvarjenih 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 odjemalca v ločeni datoteki olajša njegovo ponovno uporabo pozneje. Zdaj bomo z uporabo prilagojenega /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 se prevedena vsebina prikaže takoj, namesto da bi se najprej pokazal utrip neprevedene vsebine. Poleg tega lahko na odjemalcu preskočimo omrežne zahteve, ker ž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še nastavitve. Če je true
, bo TacoTranslate prikazal javni API ključ. Če smo v lokalnem, testnem ali staging okolju (isProduction
is false
), bomo uporabili skrivni read/write
API ključ, da bodo novi nizi poslani v prevod.
Do zdaj smo v Next.js aplikaciji nastavili le seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobiti prevode 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 neobvezne Next.js lastnosti. Upoštevajte, da je revalidate
pri getTacoTranslateStaticProps
privzeto nastavljen na 60, tako da bodo vaši prevodi ostali ažurni.
Če želite katero od funkcij uporabiti 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 v komponento Translate
dodali kakršnekoli nize. Upoštevajte, da bodo nova besedila za prevod lahko ustvarjala le okolja z dovoljenji read/write
pri API ključu. Priporočamo, da imate zaprto in varno staging okolje, kjer lahko s takim API ključem preizkusite svojo produkcijsko aplikacijo in pred objavo dodate nove nize. To bo preprečilo, da bi kdorkoli kdorkoli ukradel vaš skrivni API ključ in potencialno napihnilo vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.
Ne pozabite si ogledati 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 brez zadržkov 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 še danes!