Kā īstenot internacionalizāciju Next.js lietotnē, kas izmanto Pages Router
Padariet savu React lietotni pieejamāku un sasniedziet jaunus tirgus ar internacionalizāciju (i18n).
Pasaule kļūst arvien globalizētāka, tādēļ tīmekļa izstrādātājiem kļūst arvien 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 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ā pamācībā mēs pēsim, kā pievienot internacionalizāciju jūsu React Next.js lietotnei, izmantojot servera puses renderēšanu. TL;DR: Skatīt pilnu piemēru šeit.
Šis ceļvedis ir paredzēts Next.js lietojumprogrammām, kas izmanto Pages Router.
Ja jūs 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ēra mēs izmantosim TacoTranslate.
TacoTranslate automātiski tulko jūsu tekstus jebkurā valodā, izmantojot jaunākās AI tehnoloģijas, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.
Uzstādīsim to, izmantojot npm jūsu terminālī:
npm install tacotranslate
2. solis: Izveidojiet bezmaksas TacoTranslate kontu
Tagad, kad jums ir instalēts modulis, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītos API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas un neprasa pievienot kredītkarti.
TacoTranslate lietotāja interfeisā 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ēgu saucam par public
, bet read/write
atslēgu par secret
. Piemēram, jūs tās varat pievienot .env
failam jūsu projekta saknē.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pārliecinieties, ka nekad nepazaudējat slepeno read/write
API atslēgu klienta puses produkcijas vidēs.
Mēs arī pievienosim vēl divas vidi mainīgās: TACOTRANSLATE_DEFAULT_LOCALE
un TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Noklusējuma rezerves valodas kods. Šajā piemērā to iestatīsim uzen
, kas apzīmē angļu valodu.TACOTRANSLATE_ORIGIN
: “Mape”, kurā tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par origināļiem š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 jāizveido klients, izmantojot iepriekš iegū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 lietojamu vēlāk. Tagad, izmantojot pielāgotu /pages/_app.tsx
, mēs pievienosim TacoTranslate
pakalpojuma sniedzē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 tulkojumu renderēšanu servera pusē. Tas būtiski uzlabo lietotāja pieredzi, parādot tulkotu saturu nekavējoties, nevis vispirms neredzami rādīt netulkotu saturu. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir visas vajadzīgās tulkojumu versijas.
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'),
});
};
Pielāgojiet isProduction
pārbaudi atbilstoši jūsu iestatījumam. Ja true
, TacoTranslate izmantos publisko API atslēgu. Ja esam lokālā, testa vai starpposma vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai nodrošinātu, ka jauni teksti tiek nosūtīti tulkošanai.
Līdz šim mēs esam iestatījuši Next.js lietotni tikai ar atbalstīto valodu sarakstu. Nākamais solis būs iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, jūs izmantosiet vai nu getTacoTranslateStaticProps
, vai getTacoTranslateServerSideProps
atkarībā no jūsu prasībām.
Šīs funkcijas saņem trīs argumentus: vienu Next.js Static Props Context objektu, konfigūrāciju TacoTranslate un izvēles 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 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 varēt 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 testējiet!
Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet 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 jaunus tekstus tulkošanai. Mēs iesakām izveidot slēgtu un drošu testēšanas vidi (staging), kur varat pārbaudīt savu produkcijas lietotni ar šādu API atslēgu, pievienojot jaunus tekstus pirms palaišanas tiešraidē. Tas novērsīs jebkura slepenās API atslēgas zādzību un potenciālu tulkošanas projekta pārblīvēšanu ar jaunām, nesakarīgām rindām.
Noteikti apskatiet pilnu piemēru mūsu GitHub profilā. Tur arī atradīsit 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 palīdzēsim.
TacoTranslate ļauj jums ātri un automātiski lokalizēt jūsu React lietojumprogrammas uz jebkuru valodu un no tās. Sāciet jau šodien!