Kaip įgyvendinti internacionalizaciją Next.js programoje, kuri naudoja Pages Router
Padarykite savo React programą labiau prieinamą ir pasiekite naujas rinkas su lokalizacija (i18n).
Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau tampa interneto kūrėjams kurti programas, kurios galėtų patenkinti vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra internacionalizacija (i18n), leidžianti pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datos formatams.
Šiame vadove apžvelgsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės atvaizdavimą. TL;DR: Čia rasite pilną pavyzdį.
Šis vadovas skirtas Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, vietoj to peržiūrėkite šį vadovą.
1 žingsnis: Įdiekite i18n biblioteką
Norėdami įgyvendinti internacionalizaciją jūsų Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra kelios populiarios bibliotekos, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.
TacoTranslate automatiškai verčia jūsų eilutes į bet kurią kalbą naudodama pažangų dirbtinį intelektą ir atleidžia 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į, laikas sukurti savo TacoTranslate paskyrą, vertimų projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nebūtina nurodyti kredito kortelės.
TacoTranslate programos vartotojo sąsajoje sukurkite projektą ir eikite į jo API raktų skirtuką. Sukurkite vieną read
raktą ir vieną read/write
raktą. Išsaugosime juos kaip aplinkos kintamuosius. read
raktas yra tai, ką vadiname public
, o read/write
raktas yra secret
. Pavyzdžiui, galite juos pridėti į .env
failą jūsų projekto šaknyje.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Įsitikinkite, kad slaptasis read/write
API raktas niekada nebūtų nutekintas į kliento pusės gamybines aplinkas.
Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE
ir TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Numatytasis atsarginis lokalės kodas. Šiame pavyzdyje nustatysime jį kaipen
(anglų kalbai).TACOTRANSLATE_ORIGIN
: „aplankas“, kuriame bus saugomi jūsų tekstai, pavyzdžiui jūsų svetainės URL. Sužinokite daugiau apie originus čia.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3 žingsnis: TacoTranslate nustatymas
Norėdami integruoti TacoTranslate į savo programą, turėsite sukurti klientą, naudodami anksčiau pateiktus 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;
Netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY
.
Kliento sukūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. Dabar, naudodami pasirinktą /pages/_app.tsx
, pridėsime TacoTranslate
teikė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
, išplėskite apibrėžimą įtraukdami aukščiau pateiktas savybes ir kodą.
4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas
TacoTranslate leidžia vykdyti vertimų atvaizdavimą serverio pusėje. Tai žymiai pagerina vartotojo patirtį — iškart rodomas išverstas turinys, užuot pirmiau pasirodžius trumpam neišversto turinio blyksniui. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visus reikalingus vertimus.
Pradėsime kuriant arba redaguojant /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 programą su palaikomų kalbų sąrašu. Kitas žingsnis — gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps
, arba getTacoTranslateServerSideProps
, priklausomai nuo jūsų reikalavimų.
Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir neprivalomus Next.js parametrus. Atkreipkite dėmesį, kad getTacoTranslateStaticProps
parametras revalidate
pagal numatytuosius nustatymus nustatytas į 60, todėl jūsų vertimai lieka atnaujinti.
Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite tokį puslapio failą: /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!
Baigta! Jūsų React programa dabar bus automatiškai išversta, kai į Translate
komponentą pridėsite bet kokias eilutes. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write
teises prie API rakto, galės sukurti naujas verčiamas eilutes. Rekomenduojame turėti uždarą ir apsaugotą staging aplinką, kurioje galėtumėte išbandyti savo produkcinę programą su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant į gamybą. Tai užkirs kelią kam nors kam nors pavogti jūsų slaptą API raktą ir galimai išpūsti jūsų vertimų projektą pridėjus naujų, nesusijusių eilutų.
Būtinai peržiūrėkite pilną pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router! Jei susidursite su kokiomis nors problemomis, drąsiai susisiekite, ir mes mielai padėsime.
TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į ir iš daugiau nei 75 kalbų. Pradėkite jau šiandien!