Kā ieviest internacionalizāciju Next.js lietojumprogrammā, kas izmanto Pages Router
Padariet savu React lietotni pieejamāku un sasniedziet jaunus tirgus, izmantojot internacionalizāciju (i18n).
Pasaule kļūst arvien globalizētāka, un tīmekļa izstrādātājiem kļūst aizvien svarīgāk veidot lietojumprogrammas, kas var pielāgoties lietotājiem 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 lietojumprogrammu 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 lietojumprogrammai, 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, skatiet šo ceļvedi tā vietā.
1. solis: Instalējiet i18n bibliotēku
Lai jūsu Next.js lietotnē īstenotu internacionalizāciju (i18n), 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 virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no laikietilpīgas JSON failu pārvaldības.
Instalēsim to, izmantojot npm, terminālī:
npm install tacotranslate
2. solis: Izveidojiet bezmaksas TacoTranslate kontu
Tagad, kad modulis ir instalēts, ir pienācis laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams pievienot kredītkaršu datus.
TacoTranslate lietotnes lietotāja saskarnē izveidojiet projektu un pārejiet uz tā API atslēgu cilni. Izveidojiet vienu read
atslēgu un vienu read/write
atslēgu. Saglabāsim tās kā vides mainīgos. Atslēga read
ir tā, ko mēs saucam par public
, savukārt atslēga read/write
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 nekad neizpaužat slepeno read/write
API atslēgu klienta puses produkcijas vidēs.
Mēs arī pievienosim vēl divus vides mainīgos: TACOTRANSLATE_DEFAULT_LOCALE
un TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Noklusējuma rezerves lokalizācijas 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. Uzziniet vairāk par avotiem šeit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. solis: TacoTranslate iestatīšana
Lai integrētu TacoTranslate savā lietotnē, jums būs jāizveido klients, izmantojot iepriekš norādī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 vēlāk vieglāk izmantot. 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 īstenoš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 nenotulkota satura zibšņi. Papildus tam mēs varam izlaist tīkla pieprasījumus klientā, jo mums jau ir visi nepieciešamie tulkojumi.
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 atrodamies lokālā, testēšanas vai sagatavošanas vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai nodrošinātu jaunu tekstu nosūtīšanu tulkošanai.
Līdz šim mēs esam tikai iestatījuši Next.js lietotni ar atbalstīto valodu sarakstu. Nākamais solis — iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, atkarībā no jūsu prasībām izmantojiet vai nu getTacoTranslateStaticProps
vai getTacoTranslateServerSideProps
.
Šīm funkcijām ir trīs argumenti: viens Next.js Static Props Context objekts, TacoTranslate konfigurācija un izvēles Next.js parametri. Ņemiet vērā, ka revalidate
pie getTacoTranslateStaticProps
pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi būtu aktuāli.
Lai izmantotu kādu 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: Izvietot un testēt!
Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosit jebkādas virknes Translate
komponentā. Ņemiet vērā, ka tikai vidēs, kur API atslēgai ir piešķirtas read/write
atļaujas, būs iespējams izveidot jaunas virknes tulkošanai. Mēs iesakām izveidot slēgtu un drošu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni ar šādu API atslēgu, pievienojot jaunas virknes pirms palaišanas. Tas novērsīs, ka ikviens ikviens nozags jūsu slepeno API atslēgu un potenciāli uzpūstīs jūsu tulkojumu projektu, pievienojot jaunus, nesaistītus virknes.
Noteikti apskatiet pilno 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 labprāt palīdzēsim.
TacoTranslate ļauj ātri un automātiski lokalizēt jūsu React lietotnes vairāk nekā 75 valodās. Sāciet jau šodien!