Kaip įgyvendinti internacionalizaciją Next.js programoje, kuri naudoja Pages Router
Padarykite savo React programą prieinamesnę ir pasiekite naujas rinkas naudodami internacionalizaciją (i18n).
Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau tampa interneto kūrėjams kurti programas, kurios galėtų patenkinti vartotojus iš įvairių šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra tarptautinimas (i18n), kuris leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.
Šiame mokyme aptarsime, kaip pridėti tarptautinimą jūsų React Next.js programai su serverio pusės renderinimu. TL;DR: Pilną pavyzdį rasite čia.
Šis vadovas skirtas Next.js programėlėms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome peržiūrėti šį vadovą.
1 žingsnis: Įdiekite i18n biblioteką
Norėdami įgyvendinti internacionalizaciją savo Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra keletas populiarių bibliotekų, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.
TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą naudodama pažangiausią dirbtinį intelektą ir išlaisvina jus nuo varginančio JSON failų valdymo.
Įdiekime ją naudodami npm savo terminale:
npm install tacotranslate
2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą
Dabar, kai įdiegėte modulį, atėjo laikas susikurti savo TacoTranslate paskyrą, vertimo projektą ir susietus API raktus. Sukurkite paskyrą čia. Tai nemokama, ir nereikia pridėti kredito kortelės.
TacoTranslate programos vartotojo sąsajoje sukurkite projektą ir eikite į jo API raktų skiltį. Sukurkite vieną read
raktą ir vieną read/write
raktą. Juos išsaugosime kaip aplinkos kintamuosius. read
raktas vadinamas public
, o read/write
raktas – secret
. Pavyzdžiui, juos galite pridėti į .env
failą savo projekto šaknyje.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Būkite tikri, kad niekada neišleisite slaptų read/write
API raktų klientų puses gamybos aplinkoje.
Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE
ir TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Numatytoji atsarginė kalbos kodas. Šiame pavyzdyje jį nustatysime kaipen
anglų kalbai.TACOTRANSLATE_ORIGIN
: „Katalogas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, jūsų svetainės URL. Skaitykite daugiau apie šaltinius čia.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3 žingsnis: TacoTranslate nustatymas
Norėdami integruoti TacoTranslate su savo programa, turėsite sukurti klientą, naudodami ankstesnius API raktus. Pavyzdžiui, sukurkite failą pavadinimu /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;
Mes netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY
.
Kliento kūrimas atskirame faile palengvina jo naudojimą vėliau. Dabar, naudodami tinkintą /pages/_app.tsx
, pridėsime TacoTranslate
tiekėją.
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>
);
}
Jei jau turite pasirinktinius pageProps
ir _app.tsx
, prašome išplėsti apibrėžimą naudodami aukščiau pateiktas savybes ir kodą.
4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas
TacoTranslate leidžia vykdyti vertimus serverio pusėje. Tai žymiai pagerina naudotojo patirtį, nes iš karto rodomas išverstas turinys, o ne trumpas nevertinto turinio blyksnis. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visus reikalingus vertimus.
Pradėsime kurdami arba keisdami /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'),
});
};
Pakeiskite isProduction
patikrinimą, kad jis atitiktų jūsų sąranką. Jei true
, "TacoTranslate" pateiks viešąjį API raktą. Jei esame vietinėje, bandomojoje ar sustojimo aplinkoje (isProduction
is false
), naudosime slaptą read/write
API raktą, kad įsitikintume, jog naujos eilutės siunčiamos vertimui.
Iki šiol mes tik nustatėme Next.js programai palaikomų kalbų sąrašą. Kitas žingsnis – gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps
, arba getTacoTranslateServerSideProps
pagal jūsų poreikius.
Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir pasirenkamas Next.js savybes. Atkreipkite dėmesį, kad revalidate
parametras funkcijai getTacoTranslateStaticProps
pagal numatytuosius nustatymus yra 60, todėl jūsų vertimai išlieka atnaujinti.
Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkim, kad turite puslapio failą, pavyzdžiui, /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!"/>;
}
Dabar turėtumėte galėti naudoti Translate
komponentą, kad išverstumėte tekstus visuose savo React komponentuose.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5 žingsnis: Diegti ir išbandyti!
Mes baigėme! Jūsų React programa dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate
komponentą. Atkreipkite dėmesį, kad tik aplinkos su read/write
leidimais API rakte galės kurti naujas vertimui skirtas eilutes. Rekomenduojame turėti uždarą ir saugią testavimo aplinką, kurioje galėtumėte išbandyti savo gamybos programą su tokio tipo API raktu, pridėdami naujas eilutes prieš paleisdami ją gyvai. Tai apsaugos jūsų slaptą API raktą nuo pavogimo ir neleis išpūsti jūsų vertimo projekto pridedant naujas, nesusijusias eilutes.
Būtinai peržiūrėkite visą pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router ! Jei susidursite su kokiomis nors problemomis, nedvejodami susisiekite, ir mes mielai jums padėsime.
TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į bet kokią kalbą ir iš jos. Pradėkite šiandien!