Kā ieviest internacionalizāciju Next.js lietotnē, kas izmanto Pages Router
Padariet savu React lietotni pieejamāku un sasniedziet jaunus tirgus, izmantojot internacionalizāciju (i18n).
Kā pasaule kļūst aizvien globalizētāka, tīmekļa izstrādātājiem kļūst svarīgāk veidot lietotnes, kas spēj apkalpot lietotājus no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to panākt, 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 lietojumprogrammām, kas izmanto Pages Router.
Ja izmantojat App Router, lūdzu, skatiet šo ceļvedi.
1. solis: Instalējiet i18n bibliotēku
Lai savā Next.js lietotnē ieviestu internacionalizāciju, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Tomēr šajā piemērā mēs izmantosim TacoTranslate.
TacoTranslate automātiski pārtulko jūsu tekstus jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldīšanas.
Instalēsim to, izmantojot npm savā terminālī:
npm install tacotranslate
2. solis: Izveidojiet bezmaksas TacoTranslate kontu
Tagad, kad esat instalējis moduli, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un ar to saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams norādīt kredītkarti.
TacoTranslate lietotnes saskarnē izveidojiet projektu un dodieties uz tā API atslēgu cilni. Izveidojiet vienu read
atslēgu un vienu read/write
atslēgu. Mēs tās saglabāsim kā vides mainīgos. read
atslēga ir tā, ko saucam par public
, bet read/write
atslēga ir secret
. Piemēram, jūs tās varat pievienot failam .env
jūsu projekta saknē.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pārliecinieties, ka slepenā read/write
API atslēga nekad netiek nopludināta klienta puses ražošanas vidēs.
Mēs arī pievienosim vēl divus vides mainīgos: TACOTRANSLATE_DEFAULT_LOCALE
un TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Noklusējuma rezerves (fallback) lokalizācijas kods. Šajā piemērā to iestatīsim uzen
angļu valodai.TACOTRANSLATE_ORIGIN
: "mape", kur tiks glabātas jūsu teksta virknes, piemēram jūsu vietnes URL. Lasiet vairāk par origin šeit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. solis: TacoTranslate iestatīšana
Lai integrētu TacoTranslate ar jūsu 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īzumā 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āgotas 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 ievērojami uzlabo lietotāja pieredzi, jo tulkots saturs tiek rādīts uzreiz, nevis vispirms parādās īslaicīgs netulkota satura zibšņojums. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.
Sāksim ar /next.config.js
izveidi vai modificēšanu.
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'),
});
};
Pielāgojiet isProduction
pārbaudi atbilstoši savai konfigurācijai. Ja true
, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testa vai staging vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai nodrošinātu, ka jaunie teksti tiek nosūtīti tulkošanai.
Līdz šim mēs Next.js lietotnē esam iestatījuši tikai atbalstīto valodu sarakstu. Nākamais solis ir izgūt tulkojumus visām jūsu lapām. Lai to panāktu, atkarībā no jūsu prasībām izmantosiet vai nu getTacoTranslateStaticProps
vai getTacoTranslateServerSideProps
.
Šīs funkcijas pieņem trīs argumentus: vienu Next.js Static Props Context objektu, TacoTranslate konfigurāciju un neobligātas Next.js īpašības. Ņemiet vērā, ka revalidate
funkcijā getTacoTranslateStaticProps
pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi būtu aktuāli.
Lai izmantotu jebkuru no šīm 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 vajadzētu būt iespējai izmantot Translate
komponentu, 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 pievienosiet jebkuras virknes Translate
komponentā. Ņemiet vērā, ka tikai tās vides, kuru API atslēgai ir read/write
atļaujas, varēs izveidot jaunas virknes tulkošanai. Iesakām izveidot slēgtu un aizsargātu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni, izmantojot tādu API atslēgu un pievienot jaunas virknes pirms publicēšanas. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs iespējamu tulkojumu projekta pārslogošanu, ja tiks pievienotas jaunas, nesaistītas virknes.
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 jebkādām problēmām, droši sazinieties, un mēs labprāt palīdzēsim.
TacoTranslate ļauj automātiski lokalizēt jūsu React lietotnes ātri uz vairāk nekā 75 valodām un no tām. Sāciet jau šodien!