Si të implementoni ndërkombëtarizimin në një aplikacion Next.js që përdor Pages Router
Bëni aplikacionin tuaj React më aksesues dhe arrini tregje të reja me ndërkombëtarizim (i18n).
Ndërsa bota bëhet gjithnjë e më e globalizuar, është gjithnjë e më e rëndësishme për zhvilluesit e uebit të krijojnë aplikacione që mund t'i përshtaten përdoruesve nga vende dhe kultura të ndryshme. Një nga mënyrat kyçe për të arritur këtë është përmes ndërkombëtarizimit (i18n), i cili ju lejon të përshtatni aplikacionin tuaj me gjuhë, valuta dhe format datash të ndryshme.
Në këtë tutorial, do të eksplorojmë se si të shtoni ndërkombëtarizimin në aplikacionin tuaj React Next.js, me renderim në anën e serverit. TL;DR: Shih 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ë kësaj.
Hapi 1: Instaloni një bibliotekë i18n
Për të zbatuar ndërkombëtarizimin në aplikacionin tuaj Next.js, së pari do të zgjedhim një bibliotekë i18n. Ka disa biblioteka të njohura, duke përfshirë next-intl. Megjithatë, në këtë shembull, do të përdorim TacoTranslate.
TacoTranslate përkthen automatikisht vargjet tuaja në çdo gjuhë duke përdorur inteligjencën artificiale më të avancuar, dhe ju lirëson nga menaxhimi i lodhshëm i skedarëve JSON.
Le ta instalojmë atë duke përdorur npm në terminalin tuaj:
npm install tacotranslate
Hapi 2: Krijo një llogari falas në TacoTranslate
Tani që e keni instaluar modulin, është koha të krijoni llogarinë tuaj 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 kartë krediti.
Brenda ndërfaqes së aplikacionit TacoTranslate, krijoni një projekt dhe navigoni në skedën e çelësave API. Krijoni një çelës read
dhe një çelës read/write
. Ne do t’i ruajmë ato si variabla mjedisi. Çelësi read
është ai që 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 rrjedhni kurrë çelësin sekret të API-së read/write
në mjediset e prodhimit në anën e klientit.
Ne gjithashtu do të shtojmë dy variabla të tjerë të mjedisit: TACOTRANSLATE_DEFAULT_LOCALE
dhe TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kodi i gjuhës së parazgjedhur për kthim. Në këtë shembull, ne do ta vendosim nëen
për anglisht.TACOTRANSLATE_ORIGIN
: “Dosja” ku do të ruhen tekstet tuaja, si p.sh. URL-ja e faqes suaj të internetit. 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 me aplikacionin tuaj, do t’ju duhet të krijoni një klient duke përdorur çelësat API nga më parë. Për shembull, krijoni një skedar me emrin /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;
Ne do të 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 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 pageProps
dhe _app.tsx
të personalizuara, ju lutemi zgjerojeni definicionin me vetitë dhe kodin nga lart.
Hapi 4: Zbatimi i renderimit në anën e serverit
TacoTranslate lejon renderimin në anën e serverit të përkthimeve tuaja. Kjo përmirëson ndjeshëm përvojën e përdoruesit duke shfaqur menjëherë përmbajtjen e përkthyer, në vend të një shflejtjeje të përmbajtjes së papërkthyer së pari. Për më tepër, ne mund të anashkalojmë kërkesat e rrjetit në klient, sepse tashmë kemi të gjitha përkthimet që na nevojiten.
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.
Derisa tani, ne kemi vendosur vetëm një listë të gjuhëve të mbështetura për aplikacionin Next.js. Hapi i radhës do të jetë 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
bazuar në kërkesat tuaja.
Këto funksione marrin tre argumente: Një objekt Next.js Static Props Context, konfigurimin 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ë qëndrojnë të përditësuara.
Për të përdorur cilindo nga funksionet në një faqe, le të supozojmë që 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 brenda të gjitha komponentëve tuaj React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Hapi 5: Publiko dhe testoi!
Kemi përfunduar! Aplikacioni juaj React tani do të përkthehet automatikisht kur të shtoni ndonjë varg tek komponenti Translate
. Kini parasysh se vetëm mjediset me lejet read/write
për çelësin API do të jenë në gjendje të krijojnë vargje të reja për t'u përkthyer. Ne rekomandojmë të keni një mjedis staging të mbyllur dhe të sigurt ku mund të testoni aplikacionin tuaj në prodhim me një çelës API të tillë, duke shtuar vargje të reja para se të bëheni live. Kjo do të parandalojë që kushdo të vjedhë çelësin tuaj sekret API, dhe potencialisht të fryjë projektin tuaj të përkthimit duke shtuar vargje të reja, të pazbatuara.
Sigurohuni të shikoni shembullin e plotë në profilin tonë në GitHub. Atje, do të gjeni gjithashtu një shembull sesi ta bëni këtë duke përdorur App Router‑in! Nëse hasni ndonjë problem, mos hezitoni të kontaktoni, dhe ne do të jemi shumë të gatshëm t'ju ndihmojmë.
TacoTranslate ju lejon të lokalizoni automatikisht aplikacionet tuaja React shpejt në dhe nga çdo gjuhë. Filloni sot!