Si të implementoni internacionalizimin në një aplikacion Next.js që përdor Pages Router

Teksa bota bëhet më e globalizuar, bëhet gjithnjë e më e rëndësishme për zhvilluesit e web-it të ndërtojnë aplikacione që mund t'u përshtaten përdoruesve nga vende dhe kultura të ndryshme. Një nga mënyrat kyçe për ta arritur këtë është ndërkombëtarizimi (i18n), i cili ju lejon të përshtatni aplikacionin tuaj për gjuhë, valuta dhe formate datash të ndryshme.

Në këtë udhëzues, do të shqyrtojmë se si të shtoni ndërkombëtarizimin në aplikacionin tuaj React Next.js, me renderim 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ë këtij.

Hapi 1: Instaloni një bibliotekë i18n

Për të zbatuar ndërkombëtarizimin (i18n) në aplikacionin tuaj Next.js, së pari do të zgjedhim një bibliotekë i18n. Ekzistojnë disa biblioteka të njohura, përfshirë next-intl. Megjithatë, në këtë shembull, do të përdorim TacoTranslate.

TacoTranslate përkthen automatikisht tekstet tuaja në çdo gjuhë me ndihmën e inteligjencës artificiale të avancuar, dhe ju çliron nga menaxhimi i lodhshëm i skedarëve JSON.

Le ta instalojmë duke përdorur npm në terminalin tuaj:

npm install tacotranslate

Hapi 2: Krijoni një llogari falas në TacoTranslate

Tani që e keni instaluar modulin, është koha për të krijuar llogarinë tuaj TacoTranslate, një projekt përkthimi, dhe çelësa API të lidhur. Krijoni një llogari këtu. Është falas, dhe nuk kërkon që të shtoni një kartë krediti.

Në ndërfaqen e aplikacionit TacoTranslate, krijoni një projekt dhe navigoni te skeda e çelësave të API-së. Krijoni një çelës read dhe një çelës read/write. Do t'i ruajmë si variabla mjedisi. Ç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 publikoni kurrë çelësin sekret read/write të API-së në mjedise prodhimi që ekzekutohen në anën e klientit.

Do të shtojmë edhe dy variabla të mjedisit: TACOTRANSLATE_DEFAULT_LOCALE dhe TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kodi i lokalit parazgjedhës (fallback). Në këtë shembull, 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 e API-së 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;

Së shpejti do ta përcaktojmë automatikisht TACOTRANSLATE_API_KEY.

Krijimi i klientit në një skedar të veçantë e bën më të lehtë përdorimin e tij 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, ju lutemi shtoni pronat dhe kodin e mësipërm në përkufizim.

Hapi 4: Zbatimi i renderimit 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 menjëherë përmbajtjen e përkthyer, në vend që fillimisht të shfaqet për pak çaste përmbajtja e papërkthyer. Për më tepër, mund të anashkalojmë kërkesat e rrjetit nga klienti, 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'),
	});
};

Ndryshoni kontrollin isProduction që të përputhet me konfigurimin tuaj. Nëse true, TacoTranslate do të shfaqë çelësin publik të API-së. Nëse jemi në një mjedis lokal, testimi ose staging (isProduction is false), do të përdorim çelësin sekret read/write të API-së për t’u siguruar që vargjet e reja dërgohen për përkthim.

Deri më tani, ne kemi konfiguruar aplikacionin Next.js vetëm me një listë gjuhësh të mbështetura. Hapi tjetër që do të bëjmë ë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 bazuar në kërkesat 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 te 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 ndonjërin nga këto funksione 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ë mund të përdorni komponentin Translate për të përkthyer vargjet në të gjithë komponentët tuaj React.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Hapi 5: Publikoni dhe testoni!

Përfunduam! Aplikacioni juaj React tani do të përkthehet automatikisht kur të shtoni ndonjë tekst në një komponent Translate. Kini parasysh që vetëm mjediset me leje read/write në çelësin e API-së do të mund të krijojnë tekste 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 të prodhimit me një çelës API të tillë, duke shtuar tekste të reja para se të publikoni. Kjo do të parandalojë që kushdo kushdo të vjedhë çelësin tuaj sekret të API-së, dhe potencialisht të mbingarkojë projektin tuaj të përkthimit duke shtuar tekste të reja, të palidhura.

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 ne do të jemi mëse të lumtur t'ju ndihmojmë.

TacoTranslate ju lejon të lokalizoni automatikisht aplikacionet tuaja React shpejt nga dhe në më shumë se 75 gjuhë. Filloni sot!