Kā ieviest internacionalizāciju Next.js lietotnē, kas izmanto Pages Router
Padari savu React lietotni pieejamāku un sasniedz jaunus tirgus ar internacionalizāciju (i18n).
Kad pasaule kļūst arvien globalizētāka, kļūst aizvien svarīgāk, lai tīmekļa izstrādātāji veidotu lietotnes, kas spēj pielāgoties lietotājiem no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to sasniegt, ir internacionalizācija (i18n), kas ļauj pielāgot jūsu lietotni dažādām valodām, valūtām un datuma formātiem.
Šajā apmācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietotnei, izmantojot servera puses renderēšanu. TL;DR: Pilnu piemēru skatiet šeit.
Šis ceļvedis ir paredzēts Next.js lietotnēm, kas izmanto Pages Router.
Ja izmantojat App Router, lūdzu, skatiet šo ceļvedi.
1. solis: Instalējiet i18n bibliotēku
Lai ieviestu internacionalizāciju savā Next.js lietotnē, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Tomēr šajā piemēru mēs izmantosim TacoTranslate.
TacoTranslate automātiski pārtulko jūsu virknes jebkurā valodā, izmantojot modernas mākslīgā intelekta tehnoloģijas, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.
Instalēsim to, izmantojot npm savā terminālī:
npm install tacotranslate
2. solis: Izveido bezmaksas TacoTranslate kontu
Tagad, kad modulis ir instalēts, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveido kontu šeit. Tas ir bezmaksas, un neprasa pievienot kredītkarti.
TacoTranslate lietotnes lietotāja saskarnē izveidojiet projektu un dodieties uz tā API taustiņu cilni. Izveidojiet vienu read
taustiņu un vienu read/write
taustiņu. Mēs tos saglabāsim kā vides mainīgos. read
taustiņu mēs saucam par public
, bet read/write
taustiņu — par secret
. Piemēram, varat tos pievienot .env
failam jūsu projekta saknes mapē.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pārliecinieties, ka nekad nepaziņojat slepeno read/write
API atslēgu klienta puses produkcijas vidēm.
Mēs pievienosim arī divas papildu vides mainīgās: TACOTRANSLATE_DEFAULT_LOCALE
un TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Noklusējuma rezerves lokalizācijas kods. Šajā piemērā mēs to iestatīsim uzen
angļu valodai.TACOTRANSLATE_ORIGIN
: “Mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasīt vairāk par izcelsmēm šeit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. solis: TacoTranslate iestatīšana
Lai integrētu TacoTranslate ar savu lietotni, jums būs jāizveido klients, izmantojot iepriekš minētās API atslēgas. Piemēram, izveidojiet failu ar nosaukumu /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;
Mēs drīz automātiski definēsim TACOTRANSLATE_API_KEY
.
Klienta izveide atsevišķā failā padara to vieglāk izmantot vēlāk. Tagad, izmantojot pielāgoto /pages/_app.tsx
, mēs pievienosim TacoTranslate
nodrošinātāju.
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>
);
}
Ja jums jau ir pielāgoti pageProps
un _app.tsx
, lūdzu, paplašiniet definīciju ar iepriekš minētajām īpašībām un kodu.
4. solis: Servera puses renderēšanas ieviešana
TacoTranslate ļauj veikt jūsu tulkojumu servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, uzreiz parādot tulkotu saturu, nevis vispirms īslaicīgu netulkota satura mirgojumu. Turklāt mēs varam izvairīties no tīkla pieprasījumiem klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.
Mēs sāksim, izveidojot vai modificējot /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'),
});
};
Modificējiet isProduction
pārbaudi atbilstoši jūsu iestatījumiem. Ja true
, TacoTranslate nodrošinās publisko API atslēgu. Ja mēs esam lokālā, testēšanas vai izvēršanas vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai nodrošinātu, ka jaunas virknes tiek nosūtītas tulkošanai.
Līdz šim mēs esam iestatījuši tikai atbalstīto valodu sarakstu Next.js lietotnē. Nākamais solis būs iegūt tulkojumus visām jūsu lapām. To darot, jūs izmantosiet vai nu getTacoTranslateStaticProps
, vai getTacoTranslateServerSideProps
atkarībā no jūsu prasībām.
Šīs funkcijas pieņem trīs argumentus: vienu Next.js Static Props Context objektu, konfigurāciju TacoTranslate un papildu Next.js īpašības. Ņemiet vērā, ka revalidate
uz getTacoTranslateStaticProps
pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi būtu atjaunināti.
Lai izmantotu jebkuru no funkcijām lapā, pieņemsim, ka jums ir lapas fails, piemēram, /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!"/>;
}
Tagad jums būtu jāvar izmantot komponentu Translate
lai tulkotu virknes visos jūsu React komponentos.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5. solis: Izvietojiet un pārbaudiet!
Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosit jebkādus tekstus Translate
komponentā. Ņemiet vērā, ka tikai vidēs ar read/write
atļaujām API atslēgā būs iespējams izveidot jaunas virknes tulkošanai. Mēs iesakām izmantot slēgtu un aizsargātu testēšanas vidi, kurā varat pārbaudīt savu ražošanas lietotni ar šādu API atslēgu, pievienojot jaunas virknes pirms tiešraides. Tas novērsīs jūsu slepenās API atslēgas zādzību un potenciāli novērsīs tulkošanas projekta pārslogošanu ar jauniem, nesaistītiem tekstiem.
Noteikti apskatiet pilnu piemēru mūsu GitHub profilā. Tur jūs arī atradīsiet piemēru, kā to izdarīt, izmantojot App Router! Ja sastopaties ar kādām problēmām, droši sazinieties, un mēs ar prieku jums palīdzēsim.
TacoTranslate ļauj jums automātiski lokalizēt jūsu React lietotnes ātri uz jebkuru valodu un no tās. Sāciet jau šodien!