Geriausias sprendimas internationalizacijai (i18n) Next.js programėlėse
Ar norite plėsti savo Next.js programą į naujas rinkas? TacoTranslate daro neįtikėtinai lengva lokalizuoti jūsų Next.js projektą, leidžiant pasiekti pasaulinę auditoriją be rūpesčių.
Kodėl verta rinktis TacoTranslate Next.js?
- Sklandi integracija: Sukurtas specialiai Next.js programoms, TacoTranslate lengvai įsilieja į jūsų esamą darbo eigą.
- Automatinis eilučių rinkimas: Daugiau nereikia rankiniu būdu tvarkyti JSON failų. TacoTranslate automatiškai surenka eilutes iš jūsų kodo bazės.
- Dirbtinio intelekto varomos vertimai: Pasinaudokite DI galia, kad suteiktumėte kontekstualiai tikslius vertimus, atitinkančius jūsų programos toną.
- Akimirksniu palaikomos kalbos: Pridėkite palaikymą naujoms kalboms vos vienu paspaudimu, taip padarydami savo programą prieinamą visame pasaulyje.
Kaip tai veikia
Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau yra, kad interneto kūrėjai kurtų programas, kurios galėtų aptarnauti vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra tarptautiškumas (i18n), kuris leidžia jums pritaikyti savo programą skirtingoms kalboms, valiutoms ir datos formatams.
Šiame vadove išmoksite, kaip pridėti tarptautiškumą prie savo React Next.js programos su serverio pusės atvaizdavimu. TL;DR: Pilną pavyzdį rasite čia.
Ši instrukcija skirta Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome vietoj to peržiūrėti šią instrukciją.
1 veiksmas: Į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ą, naudodamas pažangią DI technologiją, ir atlaisvina jus nuo nuobodaus JSON failų valdymo.
Įdiekime jį naudodami npm savo terminale:
npm install tacotranslate
2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą
Dabar, kai modulį jau įdiegėte, laikas sukurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja pridėti kreditinės 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
raktą vadiname public
o read/write
raktą – secret
. Pavyzdžiui, juos galite pridėti prie .env
failo savo projekto šaknyje.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Būkite tikri, kad niekada neišleisite slapto read/write
API rakto klientinėje gamybos aplinkoje.
Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE
ir TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Numatytoji atsarginė lokalė. Šiame pavyzdyje ją nustatysime kaipen
– anglų kalba.TACOTRANSLATE_ORIGIN
: „Katalogas“, kuriame bus saugomi jūsų tekstai, pavyzdžiui, jūsų svetainės URL. Daugiau apie originus skaitykite č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 anksčiau gautus 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 kūrimas atskirame faile leidžia jį lengviau panaudoti vėliau. Dabar, naudodami pasirinktinį /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 suasmenintus pageProps
ir _app.tsx
, prašome išplėsti apibrėžimą su aukščiau nurodytomis savybėmis ir kodu.
4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas
TacoTranslate leidžia atlikti vertimų serverio pusėje atvaizdavimą. Tai žymiai pagerina vartotojo patirtį, nes iš karto rodoma išversta turinys, o ne pirmiausia blyksi nevertintas turinys. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visas reikalingas vertimus.
Pradėsime kurdami arba redaguodami /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ą, konfigūraciją TacoTranslate ir neprivalomus Next.js parametrus. Atkreipkite dėmesį, kad revalidate
reikšmė getTacoTranslateStaticProps
pagal nutylėjimą nustatyta į 60, kad jūsų vertimai būtų nuolat atnaujinami.
Norėdami naudoti bet kurią iš funkcijų puslapyje, tarkime, turite puslapio failą kaip /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: Diegimas ir testavimas!
Mes baigėme! Jūsų Next.js programėlė dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate
komponentą. Atkreipkite dėmesį, kad naujas verčiamas eilutes galės kurti tik aplinkos, turinčios read/write
leidimus API raktui. Rekomenduojame turėti uždarą ir apsaugotą staging aplinką, kurioje galėtumėte testuoti savo produkcijos programėlę su tokio tipo API raktu, pridedant naujas eilutes prieš paleisdami ją į gyvą režimą. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galbūt apkrautų jūsų vertimų projektą pridėdamas naujų, nesusijusių eilučių.
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!