Si të implementoni ndërkombëtarizimin në një aplikacion Next.js që përdor Pages Router

Ndërsa bota bëhet më e globalizuar, është gjithnjë e më e rëndësishme për zhvilluesit e uebit të ndërtojnë aplikacione që mund t'i shërbejnë përdoruesve nga vende dhe kultura të ndryshme. Një nga mënyrat kryesore për ta arritur këtë është përmes ndërkombëtarizimit (i18n), i cili ju lejon të përshtatni aplikacionin tuaj në gjuhë, monedha dhe formate të datës të ndryshme.

Në këtë udhëzues, 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: Shihni shembullin e plotë këtu.

Ky udhëzues është për aplikacionet Next.js që po 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 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 do të përdorim TacoTranslate.

TacoTranslate përkthen automatikisht vargjet tuaja në çdo gjuhë duke përdorur inteligjencën artificiale të përparuar, 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ë keni instaluar modulin, është koha të krijoni llogarinë tuaj TacoTranslate, një projekt përkthimi dhe çelësat përkatës të API-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 navigoni te skeda e çelësave të API-së. Krijoni një çelës read dhe një çelës read/write. Ne do t'i ruajmë si variabla mjedisore. Çelësi read është ai që ne e quajmë public, dhe çelësi read/write është secret. Për shembull, mund t'i shtoni ato në një skedar .env në rrënjën e projektit tuaj.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sigurohuni që kurrë të mos zbuloni ç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ë tjera të mjedisit: TACOTRANSLATE_DEFAULT_LOCALE dhe TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kodi i lokalit të parazgjedhur (fallback). Në këtë shembull, do ta vendosim në en për anglisht.
• TACOTRANSLATE_ORIGIN: “Dosja” ku do të ruhen vargjet tuaja, si p.sh. URL-ja e faqes suaj. Lexoni më shumë rreth origins 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, 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;

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 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ë personalizuar, ju lutemi shtoni në përkufizim vetitë dhe kodin nga më lart.

Hapi 4: Zbatimi i renderimit nga ana e serverit

TacoTranslate lejon renderizimin në anën e serverit 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ë shmangim kërkesat e rrjetit në klient, sepse tashmë kemi të gjitha përkthimet që na duhen.

Do të fillojmë duke krijuar ose duke 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'),
	});
};

Përshtatni kontrollin isProduction sipas konfigurimit 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ë siguruar që vargjet e reja të dërgohen për përkthim.

Deri tani, 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 në varësi të kërkesave 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 njërin 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 tekstet brenda të gjitha komponentëve tuaj React.

import {Translate} from 'tacotranslate/react';

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

Hapi 5: Publikoni dhe testoni!

Kemi përfunduar! Aplikacioni juaj React tani do të përkthehet automatikisht kur të shtoni ndonjë tekst në komponentin Translate. Kini parasysh se vetëm mjediset me lejet read/write mbi çelësin e API-së 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 të prodhimit me një çelës API të tillë, duke shtuar vargje të reja përpara se të publikoni. Kjo do të parandalojë këdo këdo nga vjedhja e çelësit tuaj sekret të API-së, dhe potencialisht të fryjë projektin tuaj të përkthimit duke shtuar vargje të reja, të pa lidhura.

Sigurohuni që të shikoni shembullin e plotë në profilin tonë në GitHub. Atje, do të gjeni edhe një shembull se si ta bëni këtë duke përdorur App Router! Nëse hasni ndonjë problem, ndihuni të lirë të na kontaktoni, dhe do të jemi më shumë se të lumtur t'ju ndihmojmë.

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