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).
Pasaules globalizācijas laikmetā tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietojumprogrammas, 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 lietojumprogrammu dažādām valodām, valūtām un datumu formātiem.
Šajā pamācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogrammai, izmantojot servera puses renderēšanu. TL;DR: Skatiet pilnu piemēru š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 tā vietā.
1. solis: Instalējiet i18n bibliotēku
Lai īstenotu 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ērā mēs izmantosim TacoTranslate.
TacoTranslate automātiski tulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no mokoš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 bezmaksas, un nav nepieciešams pievienot kredītkarti.
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. Mēs tās saglabāsim kā vides mainīgos. read
atslēga ir tas, ko mēs 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 slepeno read/write
API atslēgu nekad nenopludiniet 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 saglabātas jūsu virknes, piemēram, jūsu vietnes URL. Uzziniet 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 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 izmantojamu. Tagad, izmantojot pielāgotu /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, papildiniet 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, parādot tulkotu saturu uzreiz, nevis sākotnēji īslaicīgu netulkota satura mirgojumu. Turklāt mēs varam izlaist tīkla pieprasījumus klientā, 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'),
});
};
Pielāgojiet isProduction
pārbaudi, lai tā atbilstu jūsu iestatījumiem. Ja true
, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testēšanas vai staging vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai nodrošinātu, ka jaunās virknes tiek nosūtītas tulkošanai.
Līdz šim mēs Next.js lietotni esam iestatījuši tikai ar atbalstīto valodu sarakstu. Nākamais solis ir 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
.
Šī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
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 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: Izvietošana un testēšana!
Viss ir gatavs! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosit jebkādas virknes Translate
komponentam. Ņemiet vērā, ka jaunas virknes tulkošanai varēs izveidot tikai tās vides, kurām API atslēgai ir read/write
atļaujas. Mēs iesakām izveidot slēgtu un drošu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni ar tādu API atslēgu, pievienojot jaunus tekstus pirms palaišanas. Tas novērsīs, ka jebkurš jebkurš varētu nozagt jūsu slepeno API atslēgu un potenciāli uzpūst jūsu tulkojumu projektu, pievienojot jaunus, ar to nesaistītus tekstus.
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 rodas jebkādas problēmas, droši sazinieties, un mēs labprāt palīdzēsim.
TacoTranslate ļauj automātiski lokalizēt jūsu React lietotnes ātri uz un no vairāk nekā 75 valodām. Sāciet jau šodien!