Kuidas rakendada rahvusvahelistamist Next.js rakenduses, mis kasutab Pages Router-it
Tehke oma Reacti rakendus ligipääsetavamaks ja jõudke rahvusvaheliste turgudeni tänu rahvusvahelistamisele (i18n).
Maailma globaliseerudes muutub üha olulisemaks, et veebiarendajad looksid rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks võtmetest, kuidas seda saavutada, on rahvusvahelistumine (i18n), mis võimaldab kohandada teie rakendust erinevate keelte, valuutade ja kuupäevavormingute jaoks.
Selles juhendis uurime, kuidas lisada rahvusvahelistumine teie React Next.js rakendusse koos serveripoolses renderdamisega. TL;DR: Vaata täielikku näidet siit.
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
Rahvusvahelistumise rakendamiseks oma Next.js rakenduses valime esmalt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.
TacoTranslate tõlgib sinu tekstid automaatselt igasse keelde, kasutades tipptasemel tehisintellekti, ning vabastab sind JSON-failide tüütust haldamisest.
Paigaldame selle oma terminalis kasutades npm:
npm install tacotranslate
Samm 2: Loo tasuta TacoTranslate konto
Nüüd, kui sul on moodul installitud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API-võtmed. Loo konto siit. See on tasuta ja ei nõua krediitkaardi lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja navigeeri selle API võtmete vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. read
võtit nimetame public
ja read/write
võtit secret
. Näiteks võid need lisada oma projekti juurkausta asuvasse faili .env
.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veendu, et sa ei lekita kunagi saladuses olevat read/write
API võtit kliendipoolsetesse tootmiskeskkondadesse.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi varukoha keelekood. Selles näites määrame selle väärtuseksen
ehk inglise keel.TACOTRANSLATE_ORIGIN
: „Kaust“, kuhu sinu stringid salvestatakse, näiteks sinu veebisaidi URL. Loe lisateavet originaalide kohta 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 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 automaatselt peagi TACOTRANSLATE_API_KEY
väärtuse.
Kliendi loomine eraldi failis muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd lisame kohandatud /pages/_app.tsx
abil 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
, siis lisa definitsioonile ülalolevad omadused ja kood.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, kuvades kohe tõlgitud sisu, selle asemel et esmalt näidata lühikest hoiatust tõlkimata sisust. Lisaks saame kliendipoolsed võrgupäringud vahele jätta, kuna 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 vastavaks oma seadistusele. Kui true
, kuvab TacoTranslate avaliku API võtme. Kui me oleme lokaalses, test- või staging keskkonnas (isProduction
is false
), kasutame salajast read/write
API võtit, et tagada uute strings'te saatmine tõlkimiseks.
Siiani oleme Next.js rakenduse seadistanud ainult toetatud keelte nimekirjaga. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutate kas getTacoTranslateStaticProps
või getTacoTranslateServerSideProps
, olenevalt teie vajadustest.
Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, konfiguratsiooni TacoTranslate jaoks ja valikulised Next.js omadused. Pange tähele, et revalidate
on getTacoTranslateStaticProps
-l vaikimisi seatud väärtusele 60, et teie tõlked püsiksid ajakohased.
Selleks, et kasutada kumbagi funktsiooni lehel, 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 stringide tõlkimiseks kõigis oma Reacti komponentides.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5. samm: Võrku tõsta 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õtmel read/write
õigused, saavad luua uusi tõlgitavaid stringe. Soovitame teil olla suletud ja turvatud testkeskkond, kus saate oma tootmisrakendust selle API võtmega testida, lisades enne avaldamist uusi stringe. See hoiab ära, et keegi varastaks teie salajast API võtit ja potentsiaalselt paisutaks teie tõlkeprojekti, lisades uusi, mitteseotud stringe.
Veendu, et kontrollid täielikku näidet meie GitHubi profiilis. Seal leiad ka näite, kuidas seda teha kasutades App Router! Kui sul tekib probleeme, ära kõhkle meiega ühendust võtma, ja me aitame sind hea meelega.
TacoTranslate võimaldab sul automaatselt ja kiiresti lokaliseerida oma Reacti rakendusi üle 75 keele vahel. Alusta juba täna!