Kif tapplika l-internazzjonalizzazzjoni f’applikazzjoni Next.js li qed tuża Pages Router
Agħmel l-applikazzjoni React tiegħek aktar aċċessibbli u laħaq swieq ġodda bl-internazzjonalizzazzjoni (i18n).
Bħala kif id-dinja ssir aktar globalizzata, huwa dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jissodisfaw il-bżonnijiet ta’ utenti minn pajjiżi u kulturi differenti. Wieħed mill-modi ewlenin biex dan jintlaħaq huwa permezz tal-internazzjonalizzazzjoni (i18n), li tippermettilek tadatta l-applikazzjoni tiegħek għal lingwi, muniti, u formati ta’ data differenti.
F’dan it-tutorja, se nesploraw kif iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, bil-rendering mill-ġenb tas-server. TL;DR: Ara l-eżempju kollu hawn.
Dan il-gwida hija għall-applikazzjonijiet Next.js li qed jużaw il-Pages Router.
Jekk qed tuża l-App Router, jekk jogħġbok ara din il-gwida minflok.
Pass 1: Installa librerija i18n
Biex timplimenta l-internazzjonalizzazzjoni fl-applikazzjoni Next.js tiegħek, l-ewwel se nagħżlu librerija i18n. Hemm diversi libreriji popolari, inkluża next-intl. Madankollu, f'dan l-eżempju, se nużaw TacoTranslate.
TacoTranslate jittraduċi awtomatikament il-korda tiegħek għal kwalunkwe lingwa billi juża AI avvanzat, u jiffrankak mill-immaniġġjar tedjanti ta' fajls JSON.
Ejjew ninstallawh billi nużaw npm fit-terminal tiegħek:
npm install tacotranslate
Pass 2: Oħloq kont b’xejn f’TacoTranslate
Issa li għandek il-modulu installat, wasal iż-żmien li toħloq il-kont tiegħek f’TacoTranslate, proġett ta’ traduzzjoni, u ċ-ċwievet API assoċjati. Oħloq kont hawn. Huwa b'xejn, u ma jeħtieġlekx iżżid karta ta’ kreditu.
Within the TacoTranslate application UI, oħloq proġett, u mur fit-tab tal-API keys tiegħu. Oħloq wieħed read
key, u ieħor read/write
key. Aħna se ninħażnuhom bħala varjabbli ta’ ambjent. Il-key read
huwa dak li nsejħulu public
u l-key read/write
huwa secret
. Per eżempju, tista’ żżidhom f’fajl .env
fir-root tal-proġett tiegħek.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Kun żgur li qatt ma tiċċara l-muftieħ sigriet read/write
tal-API lill-ambjenti ta’ produzzjoni tal-klijent.
Se nżidu wkoll żewġ varjabbli ta’ ambjent oħra: TACOTRANSLATE_DEFAULT_LOCALE
u TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Il-kodiċi default tal-lokalità li jirritorna. F'dan l-eżempju, se nissettjah għalen
għal l-Ingliż.TACOTRANSLATE_ORIGIN
: Il-“folder” fejn ser jinżammu l-kordi tiegħek, bħal URL tal-websajt tiegħek. Aqra iktar dwar l-origini hawn.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Pass 3: Twaqqif ta' TacoTranslate
Biex tintegra TacoTranslate mal-applikazzjoni tiegħek, ikollok bżonn toħloq client billi tuża l-API keys minn qabel. Per eżempju, oħloq fajl imsejjaħ /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;
Se nkunu qed niddefinixxu awtomatikament TACOTRANSLATE_API_KEY
dalwaqt.
Il-ħolqien tal-klijent f’fajl separatu jagħmilha aktar faċli li jerġa’ jintuża aktar tard. Issa, billi nużaw /pages/_app.tsx
personalizzat, se nżidu lill-fornitur TacoTranslate
.
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>
);
}
Jekk diġà għandek pageProps
u _app.tsx
personalizzati, jekk jogħġbok iktar il-għarfien bid-definizzjonijiet u l-kodiċi imsemmi hawn fuq.
Pass 4: Implementazzjoni tat-tqassim fuq in-naħa tal-server
TacoTranslate jippermetti l-rendering fuq in-naħa tas-server tat-traduzzjonijiet tiegħek. Dan itejjeb b'mod konsiderevoli l-esperjenza tal-utent billi juri l-kontenut tradott immedjatament, minflok flash ta' kontenut mhux tradott l-ewwel. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għax diġà għandna l-ħafna traduzzjonijiet li għandna bżonn.
Nibdew billi noħolqu jew nimmodifikaw /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'),
});
};
Aġġorna l-verifika isProduction
biex taqbel mas-settings tiegħek. Jekk true
, TacoTranslate se juri l-API key pubblika. Jekk qegħdin f’ambjent lokali, ta’ prova, jew ta’ staging (isProduction
is false
), se nużaw l-API key sigrieta read/write
biex niżguraw li ġodda strings jintbagħtu għat-traduzzjoni.
Sa issa, stajna biss issettjaw l-applikazzjoni Next.js b'lista ta' lingwi appoġġati. L-għażla li jmiss li se nagħmlu hi li nġibu t-traduzzjonijiet għal kull paġna tiegħek. Biex tagħmel dan, se tuża jew getTacoTranslateStaticProps
jew getTacoTranslateServerSideProps
skont ir-rekwiżiti tiegħek.
Dawn il-funzjonijiet jieħdu tliet argumenti: oġġett wieħed Next.js Static Props Context, konfigurazzjoni għat-TacoTranslate, u proprjetajiet opzjonali ta’ Next.js. Innota li revalidate
fuq getTacoTranslateStaticProps
huwa issettjat għal 60 b'mod predefinit, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.
Biex tuża kemm-il darba waħda minn dawn il-funzjonijiet f’paġna, ejja nagħmlu suppożizzjoni li għandek fajl ta’ paġna bħal /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!"/>;
}
Issa għandek tkun tista’ tuża l-komponent Translate
biex tittraduċi l-kordi fi ħdan il-komponenti kollha tar-React tiegħek.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Pass 5: Ippubblika u ipprova!
Ilna lest! L-applikazzjoni React tiegħek se titħassar awtomatikament meta żżid kwalunkwe strings ma' komponent Translate
. Innota li biss l-ambjenti b’permessi read/write
fuq il-API key se jkunu jistgħu joħolqu strings ġodda għall-ħsieb. Nirrakkomandaw li jkollok ambjent ta' staging magħluq u sigur fejn tista' tesperimenta l-applikazzjoni tal-produzzjoni tiegħek b'API key bħal dak, billi żżid strings ġodda qabel tibda live. Dan se jipprevjeni lil xi ħadd milli jġib l-API key sigriet tiegħek, u potenzjalment iwettaq proġett ta’ traduzzjoni tiegħek billi jżid strings ġodda mhux relatati.
Kun żgur li tiċċekkja l-eżempju sħiħ fuq il-profil tagħna fuq GitHub. Hemmhekk, ser issib ukoll eżempju ta’ kif tagħmel dan billi tuża App Router! Jekk tiffaċċja xi problemi, tħossok liberu li tikkuntattjana, u nkunu kuntenti ħafna biex ngħinuk.
TacoTranslate jgħinek tinħoloq lokalizzazzjoni awtomatika għall-applikazzjonijiet React tiegħek malajr fi kwalunkwe lingwa u lura. Ibda llum!