Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab Pages Routerit
Tee oma Reacti rakendus kättesaadavamaks ja jõua uutele turgudele rahvusvahelistumise (i18n) abil.
Maailma globaliseerumisel muutub veebiarendajate jaoks üha olulisemaks ehitada rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on internatsionaliseerimine (i18n), mis võimaldab teie rakendust kohandada erinevate keelte, valuutade ja kuupäevavormingutega.
Selles juhendis uurime, kuidas lisada internatsionaliseerimist teie React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaadake täielikku näidet siin.
See juhend on mõeldud Next.js rakendustele, mis kasutavad Pages Router.
Kui kasutate App Router, vaadake palun selle asemel seda juhendit.
Samm 1: Paigalda i18n teek
Et oma Next.js rakenduses rahvusvahelistumist rakendada, valime esmalt i18n raamistu. On mitmeid populaarseid raamistikke, sealhulgas next-intl. Siiski kasutame selles näites TacoTranslate.
TacoTranslate tõlgib sinu tekstid automaatselt igasse keelde, kasutades tipptasemel tehisintellekti, ning vabastab sind tüütu JSON-failide haldamise koormast.
Paigaldame selle npm abil oma terminalis:
npm install tacotranslate
2. samm: Loo tasuta TacoTranslate konto
Nüüd, kui sul on moodul installitud, on aeg luua oma TacoTranslate konto, tõlkekomplekt ja sellega seotud API võtmed. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu selle API keys
vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. read
võtit nimetame public
ja read/write
võti on secret
. Näiteks võid need lisada oma projekti juurkataloogis asuvasse .env
faili.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veendu, et sa ei lekita kunagi salajast read/write
API-võtit kliendipoolsetesse tootmiskeskkondadesse.
Lisame ka veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi varukoha lokaali kood. Selles näites määrame selle väärtuseksen
inglise keele jaoks.TACOTRANSLATE_ORIGIN
: "Kaust", kuhu teie tekstid salvestatakse, näiteks teie veebisaidi URL. Loe originaalidest lähemalt siit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. samm: TacoTranslate seadistamine
TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt saadud 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;
Me määrame TACOTRANSLATE_API_KEY
peagi automaatselt.
Kliendi loomine eraldi failis teeb 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 sul on juba kohandatud pageProps
ja _app.tsx
, palun lisa definitsiooni ülaltoodud omadused ja kood.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuvades kohe tõlgitud sisu, mitte esmalt tõlkimata sisu sähvatusena. Lisaks saame kliendipoolseid võrgupäringuid vahele jätta, sest meil on juba kõik vajalikud tõlked olemas.
Alustame /next.config.js
faili 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'),
});
};
Muutke isProduction
kontrolli vastavalt oma seadistusele. Kui true
, toob TacoTranslate välja avaliku API võtme. Kui oleme kohalikus, test- või lavastuskeskkonnas (isProduction
is false
), kasutame salajase read/write
API-võtit, et veenduda, et uued stringid saadetakse tõlkimiseks.
Kuni nüüd oleme seadistanud Next.js rakenduse ainult toetatud keelte loendiga. Järgmiseks tõmbame tõlked kõigile teie lehtedele. Selleks kasutate vastavalt oma vajadustele kas getTacoTranslateStaticProps
või getTacoTranslateServerSideProps
.
Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, konfiguratsiooni TacoTranslate jaoks ja valikulisi Next.js omadusi. Pange tähele, et revalidate
on getTacoTranslateStaticProps
puhul vaikimisi seatud väärtusele 60, et teie tõlked oleksid ajakohased.
Kui soovite kumbagi funktsiooni lehel 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 peaks sul olema võimalik kasutada Translate
komponenti, et tõlkida stringe kõigis sinu React komponentides.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5. samm: Rakenda ja testi!
Me oleme lõpetanud! Sinu Reacti rakendus tõlgitakse nüüd automaatselt, kui lisad mõne stringi Translate
komponendile. Pane tähele, et ainult keskkonnad, millel on read/write
õigused API võtmel, saavad luua uusi tõlgitavaid stringe. Soovitame kasutada suletud ja turvatud staging-keskkonda, kus saad testida oma tootmisrakendust sellise API võtmega, lisades enne avaldamist uusi stringe. See aitab vältida, et keegi varastaks sinu salajast API võtit ning potentsiaalselt paisutaks tõlkede projekti uute, mitteasjakohaste stringidega.
Veenduge, et vaatate üle täieliku näite meie GitHubi profiilil. Seal leiate ka näite, kuidas seda teha kasutades App Router-it! Kui teil tekib mingeid probleeme, ärge kõhelge meiega ühendust võtmast, me aitame teid meeleldi.
TacoTranslate võimaldab teil automaatselt lokaliseerida oma Reacti rakendusi kiiresti igasse keelde ja sealt tagasi. Alustage juba täna!