L-aqwa soluzzjoni għall-internazzjonalizzazzjoni (i18n) fl-applikazzjonijiet Next.js
Qed tfittex li tespandi l-applikazzjoni tiegħek ta’ Next.js għal swieq ġodda? TacoTranslate jagħmilha faċli ħafna li lokalizza l-proġett Next.js tiegħek, u jippermettielek tgħaddi għal udjenza globali mingħajr l-isfida.
Għaliex tagħżel TacoTranslate għall-Next.js?
- Inkorporazzjoni Bla Xkiel: Iddisinjata speċifikament għal applikazzjonijiet Next.js, TacoTranslate tintegra bla sforz fil-fluss tax-xogħol eżistenti tiegħek.
- Ġbir Awtomatik ta' Strinji: Ebda bżonn tmexxi fajls JSON b'mod manwali. TacoTranslate jiġbor awtomatikament l-istrinji mill-kodiċi tiegħek.
- Traduzzjonijiet b'AI: Uża s-setgħa tal-AI biex tipprovdi traduzzjonijiet eżatti skont il-kuntest li jaqblu mat-ton tal-applikazzjoni tiegħek.
- Appoġġ Lingwistiku Instantanju: Żid appoġġ għal lingwi ġodda bi klikjatura waħda biss, u agħmel l-applikazzjoni tiegħek aċċessibbli globalment.
Kif jaħdem
Bħala d-dinja ssir aktar globalizzata, huwa dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jilqgħu lill-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-taħriġ, se nesploraw kif iżżid l-internazzjonalizzazzjoni mal-applikazzjoni React Next.js tiegħek, b'rendering fuq in-naħa tas-server. TL;DR: Ara l-eżempju sħiħ hawn.
Dan il-gwida hija għall-applikazzjonijiet Next.js li qed jużaw Pages Router.
Jekk qed tuża App Router, jekk jogħġbok ara din il-gwida minflok.
Pass 1: Installa librerija i18n
Biex ninimplementaw l-internazzjonalizzazzjoni fl-applikazzjoni Next.js tiegħek, l-ewwel nett se nagħżlu librerija i18n. Hemm diversi libreriji popolari, inklużi next-intl. Madankollu, f’dan l-eżempju, se nużaw TacoTranslate.
TacoTranslate jinterpreta awtomatikament l-strings tiegħek għal kwalunkwe lingwa billi juża AI avvanzat, u jħallik liberu mill-ġestjoni tedjuża ta’ fajls JSON.
Ejja ninstallawh billi nużaw npm fit-terminal tiegħek:
npm install tacotranslate
Pass 2: Oħloq kont Ħieles ta’ TacoTranslate
Issa li bħalissa għandek il-modulu installat, wasal iż-żmien li toħloq kont TacoTranslate tiegħek, proġett ta' traduzzjoni, u ċ-ċavetti API assoċjati. Oħloq kont hawn. Huwa b'xejn, u ma jeħtieġlekx iżżid karta ta' kreditu.
Dentro l-UI tal-applikazzjoni TacoTranslate, oħloq proġett, u ġib fuq it-tab tal-API keys tiegħu. Oħloq waħda read
key, u waħda read/write
key. Se nħasblu dawn bħala variabbli ta’ ambjent. Il-key read
huwa dak li nsejħu public
u l-key read/write
huwa secret
. Per eżempju, tista’ żżidhom f’file .env
fil-għeruq tal-proġett tiegħek.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Kun żgur li qatt ma tixxandar il-miftuħ sekret read/write
tal-API għall-ambjenti tal-produzzjoni fuq in-naħa tal-klijent.
Se nżidu wkoll żewġ varjabbli ambjentali oħra: TACOTRANSLATE_DEFAULT_LOCALE
u TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Il-kodiċi default tal-lokazzjoni fallback. F'dan l-eżempju, se nissettjawh għalen
għall-Ingliż.TACOTRANSLATE_ORIGIN
: Il-“folder” fejn se jinżammu l-kordi tiegħek, bħal URL tas-sit web tiegħek. Aqra aktar 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, se tkun bżonn toħloq klient bl-użu tal-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 separati jagħmilha aktar faċli li tintuża mill-ġdid aktar tard. Issa, billi nużaw /pages/_app.tsx
personalizzat, se nniedu l-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 estendi d-definizzjoni bil-proprjetajiet u l-kodiċi ta’ hawn fuq.
Pass 4: Implimentazzjoni tar-rendering fuq in-naħa tas-server
TacoTranslate jippermetti l-rendering fuq in-naħa tas-server tat-traduzzjonijiet tiegħek. Dan itejjeb b’mod kbir l-esperjenza tal-utent billi juri kontenut tradott minnufih, minflok flash ta’ kontenut mhux tradott fil-bidu. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għax diġà għandna t-traduzzjonijiet kollha li għandna bżonn.
Se 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'),
});
};
Immodifika ċ-ċekk isProduction
biex ikun adattat għas-setup tiegħek. Jekk true
, TacoTranslate se joħroġ iċ-ċavetta API pubblika. Jekk ninsabu f'ambjent lokali, tat-test, jew ta 'staging (isProduction
is false
), aħna nużaw iċ-ċavetta sigrieta read/write
API biex niżguraw li stringi ġodda jintbagħtu għat-traduzzjoni.
Sa issa, għamilna biss is-settjar tal-applikazzjoni Next.js b'elenco ta' lingwi appoġġjati. L-affarijiet li jmiss li se nagħmlu huma li nġibu t-traduzzjonijiet għal kull paġna tiegħek. Biex nagħmlu dan, se tuża kemm getTacoTranslateStaticProps
kif ukoll 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ħal TacoTranslate, u proprjetajiet opzjonali ta’ Next.js. Innota li revalidate
fuq getTacoTranslateStaticProps
huwa issettjat għal 60 b’mod default, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.
Biex tuża kwalunkwe waħda mill-funzjonijiet fuq paġna, ejja nqisu 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-korda kollha fi ħdan il-komponenti React tiegħek.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Pass 5: Ippubblika u ipprova!
Gatt! L-applikazzjoni tiegħek ta’ Next.js issa se tittraduċi awtomatikament meta żżid kwalunkwe strings fi Translate
component. Innota li biss l-ambjenti b’permess read/write
fuq il-API key se jkunu jistgħu joħolqu strings ġodda biex jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta’ staging magħluq u sigur fejn tista’ tittestja l-applikazzjoni tal-produzzjoni tiegħek b’API key bħal dak, żid strings ġodda qabel tmur live. Dan se jipprevjeni lil xi ħadd milli jisirqa l-API key sigriet tiegħek, u potenzjalment jimla l-proġett tat-traduzzjoni tiegħek billi jżid strings ġodda, mhux relatati.
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!