Si të implementoni ndërkombëtarizimin në një aplikacion Next.js që përdor Pages Router.
Bëni aplikacionin tuaj React më të aksesueshëm dhe arrini tregje të reja me ndërkombëtarizim (i18n).
Pasqyrimi i botës bëhet më global, bëhet gjithnjë e më i rëndësishëm për zhvilluesit e uebit të ndërtojnë aplikacione që mund të përmbushin nevojat e përdoruesve nga vende dhe kultura të ndryshme. Një nga mënyrat kryesore për të arritur këtë është përmes ndërkombëtarizimit (i18n), i cili ju lejon të përshtatni aplikacionin tuaj në gjuhë, valuta dhe formate datash të ndryshme.
Në këtë tutorial, do të eksplorojmë se si të shtoni ndërkombëtarizimin në aplikacionin tuaj React Next.js, me renditje në anën e serverit. TL;DR: Shihni shembullin e plotë këtu.
Ky udhëzues është për aplikacionet Next.js që përdorin Pages Router.
Nëse po përdorni App Router, ju lutemi shikoni këtë udhëzues në vend të tij.
Hapi 1: Instaloni një bibliotekë i18n
Për të zbatuar internacionalizimin në aplikacionin tuaj Next.js, së pari do të zgjedhim një bibliotekë i18n. Ka disa biblioteka të njohura, përfshirë next-intl. Megjithatë, në këtë shembull, ne do të përdorim TacoTranslate.
TacoTranslate përkthe automatikisht vargjet tuaja në çdo gjuhë duke përdorur AI të avancuar, dhe ju çliron nga menaxhimi i lodhshëm i skedarëve JSON.
Le të instalojmë atë duke përdorur npm në terminalin tuaj:
npm install tacotranslate
Hapi 2: Krijoni një llogari falas në TacoTranslate
Tani që keni instaluar modulin, është koha për të krijuar llogarinë tuaj në TacoTranslate, një projekt përkthimi dhe çelësat API përkatës. Krijoni një llogari këtu. Është falas, dhe nuk kërkon që të shtoni një kartë krediti.
Brenda ndërfaqes së aplikacionit TacoTranslate, krijoni një projekt dhe shkoni te skeda e çelësave API. Krijoni një çelës read
dhe një çelës read/write
. Do t'i ruajmë si variabla të mjedisit. Çelësi read
është ai që e quajmë public
dhe çelësi read/write
është secret
. Për shembull, mund t'i shtoni në një skedar .env
në rrënjën e projektit tuaj.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Sigurohuni që të mos rrjedhë kurrë çelësi sekret i API-së read/write
në mjediset e prodhimit në anën e klientit.
Do të shtojmë edhe dy variabla të tjerë të mjedisit: TACOTRANSLATE_DEFAULT_LOCALE
dhe TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kodi i lokalit të parazgjedhur si rezervë. Në këtë shembull, do ta vendosim nëen
për gjuhën angleze.TACOTRANSLATE_ORIGIN
: “dosja” ku do të ruhen tekstet tuaja, si p.sh. URL-ja e faqes suaj. Lexoni më shumë rreth origjinave këtu.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Hapi 3: Konfigurimi i TacoTranslate
Për të integruar TacoTranslate në aplikacionin tuaj, do t'ju duhet të krijoni një klient duke përdorur çelësat e API-së nga më parë. Për shembull, krijoni një skedar të quajtur /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;
Do ta përcaktojmë automatikisht TACOTRANSLATE_API_KEY
së shpejti.
Krijimi i klientit në një skedar të veçantë e bën më të lehtë përdorimin e tij përsëri më vonë. Tani, duke përdorur një /pages/_app.tsx
të personalizuar, do të shtojmë ofruesin 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>
);
}
Nëse tashmë keni të personalizuara pageProps
dhe _app.tsx
, ju lutem zgjerojeni përkufizimin me pronat dhe kodin e mësipërm.
Hapi 4: Zbatimi i rendering-ut nga ana e serverit
TacoTranslate lejon renderimin në server të përkthimeve tuaja. Kjo përmirëson ndjeshëm përvojën e përdoruesit duke shfaqur përmbajtjen e përkthyer menjëherë, në vend të një shfaqjeje të shkurtër të përmbajtjes së papërkthyer. Për më tepër, mund të anashkalojmë kërkesat e rrjetit në klient, sepse tashmë kemi të gjitha përkthimet që na duhen.
Do të fillojmë duke krijuar ose modifikuar /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'),
});
};
Modifikoni kontrollin e isProduction
për t'iu përshtatur konfigurimit tuaj. Nëse true
, TacoTranslate do të shfaqë çelësin publik API. Nëse jemi në një mjedis lokal, testimi ose inskenimi (isProduction
is false
), do të përdorim çelësin sekret read/write
API për t'u siguruar që vargjet e reja të dërgohen për përkthim.
Deri më tani, kemi konfiguruar aplikacionin Next.js vetëm me një listë gjuhësh të mbështetura. Hapi tjetër është të marrim përkthimet për të gjitha faqet tuaja. Për ta bërë këtë, do të përdorni ose getTacoTranslateStaticProps
ose getTacoTranslateServerSideProps
, në varësi të kërkesave tuaja.
Këto funksione marrin tre argumente: një objekt Next.js Static Props Context, konfigurim për TacoTranslate, dhe vetitë opsionale të Next.js. Vini re se revalidate
në getTacoTranslateStaticProps
është vendosur në 60 si parazgjedhje, në mënyrë që përkthimet tuaja të jenë të përditësuara.
Për të përdorur njërën nga funksionet në një faqe, le të supozojmë se keni një skedar faqeje si /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!"/>;
}
Tani duhet të jeni në gjendje të përdorni komponentin Translate
për të përkthyer vargjet në të gjitha komponentët tuaj React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Hapi 5: Shpërndaje dhe provo!
Ne kemi përfunduar! Aplikacioni juaj React tani do të përkthehet automatikisht kur të shtoni cilësdo vargje në një komponent Translate
. Vini re se vetëm ambientet me leje read/write
mbi çelësin API do të jenë në gjendje të krijojnë vargje të reja për t'u përkthyer. Ne rekomandojmë të keni një ambient staging të mbyllur dhe të sigurt ku mund të testoni aplikacionin tuaj të prodhimit me një çelës API të tillë, duke shtuar vargje të reja para se të dilni në prodhim. Kjo do të pengojë çdo person që të vjedhë çelësin tuaj sekret API, dhe potencialisht të zgjasë projektin tuaj të përkthimit duke shtuar vargje të reja të pakonaktuara.
Sigurohuni që të shikoni shembullin e plotë në profilin tonë në GitHub. Atje, gjithashtu do të gjeni një shembull se si ta bëni këtë duke përdorur App Router ! Nëse hasni ndonjë problem, mos hezitoni të na kontaktoni, dhe do të jemi më shumë se të lumtur t'ju ndihmojmë.
TacoTranslate u lejon aplikacioneve tuaja React të lokalizohen automatikisht dhe shpejt në dhe nga mbi 75 gjuhë. Filloni sot!