Kuidas rakendada rahvusvahelistamist Next.js-i rakenduses, mis kasutab Pages Router
Muuda oma Reacti rakendus ligipääsetavamaks ja jõua uute turgudeni rahvusvahelistamise (i18n) abil.
Maailma globaliseerudes on veebiarendajatel üha olulisem luua rakendusi, mis sobivad kasutajatele erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistamine (i18n), mis võimaldab kohandada teie rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.
Selles juhendis uurime, kuidas lisada rahvusvahelistamist teie React Next.js rakendusse koos serveripoolse renderdamisega. TL;DR: Vaata täielikku näidet siit.
See juhend on mõeldud Next.js-i rakendustele, mis kasutavad Pages Router.
Kui kasutate App Router, vaadake selle asemel seda juhendit.
Samm 1: Installige i18n-teek
Et rakendada oma Next.js rakenduses rahvusvahelistamist (i18n), valime esmalt i18n-raamatukogu. Saadaval on mitu populaarset raamatukogu, sealhulgas next-intl. Siiski selles näites kasutame TacoTranslate.
TacoTranslate tõlgib sinu stringid automaatselt igasse keelde tipptasemel tehisintellekti abil ning vabastab sind JSON-failide tüütust haldamisest.
Paigaldame selle, kasutades terminalis npm:
npm install tacotranslate
Samm 2: Loo tasuta TacoTranslate konto
Nüüd, kui oled mooduli installinud, on aeg luua oma TacoTranslate’i konto, tõlkeprojekt ja sellega seotud API-võtmed. Loo konto siit. See on tasuta ja ei nõua krediitkaardi lisamist.
TacoTranslate'i rakenduse kasutajaliideses loo projekt ja liigu selle API-võtmete vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. Nimetame read
võtme public
iks ja read/write
võtme secret
. Näiteks võid need lisada projekti juurkausta faili .env
.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Ärge kunagi lekitage salajast read/write
API‑võtit kliendipoolsetesse tootmiskeskkondadesse.
Lisame ka kaks täiendavat keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaiketagavara lokaali kood. Selles näites määrame selleen
-iks (inglise keele jaoks).TACOTRANSLATE_ORIGIN
: “folder”, ehk kaust, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originitest lähemalt siit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Samm 3: TacoTranslate seadistamine
TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt mainitud API‑võtmeid. Näiteks looge fail nimega /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;
Peagi määrame automaatselt TACOTRANSLATE_API_KEY
.
Kliendi loomine eraldi faili muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd, kasutades kohandatud /pages/_app.tsx
, lisame TacoTranslate
pakkuja.
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>
);
}
Kui teil on juba kohandatud pageProps
ja _app.tsx
, palun täiendage definitsiooni ülaltoodud omaduste ja koodiga.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuvades tõlgitud sisu kohe, selle asemel et kõigepealt näidata lühikest hetke tõlkimata sisu. Lisaks võime kliendipoolseid võrgupäringuid vahele jätta, sest meil on juba kõik vajalikud tõlked olemas.
Alustame /next.config.js
loomise või muutmisega.
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'),
});
};
Muuda isProduction
kontroll oma seadistusele sobivaks. Kui true
, siis TacoTranslate kuvab avaliku API-võtme. Kui oleme lokaalses, test- või staging-keskkonnas (isProduction
is false
), kasutame salajast read/write
API-võtit, et uued stringid saadetaks tõlkimiseks.
Senini oleme Next.js rakenduse seadistanud vaid toetatud keelte loendiga. Järgmiseks hangime tõlked kõigile teie lehtedele. Selleks kasutage vastavalt vajadustele kas getTacoTranslateStaticProps
või getTacoTranslateServerSideProps
.
Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, TacoTranslate'i konfiguratsiooni ja valikulised Next.js omadused. Pange tähele, et revalidate
on getTacoTranslateStaticProps
puhul vaikimisi seatud väärtuseks 60, nii et teie tõlked püsivad ajakohased.
Kui soovite kumbagi funktsiooni leheküljel kasutada, oletame, et teil on lehefail nagu /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!"/>;
}
Nüüd peaksite saama kasutada Translate
komponenti kõigi oma React-komponentide stringide tõlkimiseks.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5. samm: Juuruta ja testi!
Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate
komponendile. Pange tähele, et ainult keskkonnad, millel on API‑võtme kohta read/write
õigused, saavad luua uusi tõlgitavaid stringe. Soovitame omada suletud ja turvatud testkeskkonda, kus saate oma tootmisrakendust sellise API‑võtmega testida ning lisada uusi stringe enne avalikustamist. See takistab kedagi kedagi teie salajast API‑võtit varastamast ja potentsiaalselt teie tõlkeprojekti paisutamast, lisades uusi, mitteseotud stringe.
Kindlasti vaata meie GitHubi profiilil olevat täielikku näidet. Sealt leiad ka näite, kuidas seda App Router abil teha! Kui sul tekib probleeme, võta julgelt ühendust, ja me aitame hea meelega.
TacoTranslate võimaldab automaatselt lokaliseerida sinu React-rakendusi kiiresti enam kui 75 keelde ja sealt tagasi. Alusta juba täna!