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

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

Në këtë udhëzues, do të eksplorojmë se si të shtoni internacionalizimin në aplikacionin tuaj React Next.js, me renderim nga ana 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ë 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, do të përdorim TacoTranslate.

TacoTranslate përkthen automatikisht vargjet tuaja në çdo gjuhë duke përdorur AI të avancuar, dhe ju çliron nga menaxhimi i lodhshëm i skedarëve JSON.

Të instalojmë atë 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 të krijoni llogarinë tuaj në TacoTranslate, një projekt përkthimi dhe çelësat API përkatës. Krijoni një llogari këtu. Është falas, dhe nuk ju kërkon të shtoni një kartë krediti.

Brenda ndërfaqes së aplikacionit TacoTranslate, krijoni një projekt dhe navigoni te skeda e çelësave API. Krijoni një çelës read dhe një çelës read/write. Do t'i ruajmë si variabla mjedisore. Ç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

Sigurohu që kurrë të mos rrjedhësh çelësin sekret read/write të API-së në mjediset e prodhimit në anën e klientit.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kodi i lokalit të parazgjedhur që përdoret si rezervë. Në këtë shembull, do ta vendosim në en për gjuhën angleze.
• TACOTRANSLATE_ORIGIN: “dosja” ku do të ruhen vargjet 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 në aplikacionin tuaj, do t'ju duhet të krijoni një klient duke përdorur çelësat e API-së të përmendur 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 të përcaktojmë automatikisht TACOTRANSLATE_API_KEY së shpejti.

Krijimi i klientit në një skedar të veçantë e bën më të lehtë ta përdorni 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 zgjeroni përkufizimin me pronat dhe kodin nga më 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 shumë përvojën e përdoruesit duke shfaqur menjëherë përmbajtjen e përkthyer, në vend që të shfaqet më parë për një çast përmbajtja e papërkthyer. Për më tepër, mund të shmangim kërkesat rrjetore nga ana e klientit, 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, të testimit, 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 tani, kemi vetëm konfiguruar aplikacionin Next.js 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 pranojnë tre argumente: një objekt Next.js Static Props Context, konfigurim për TacoTranslate, dhe vetitë opsionale të Next.js. Kini parasysh që revalidate në getTacoTranslateStaticProps është caktuar 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 në të gjitha komponentët tuaj React.

import {Translate} from 'tacotranslate/react';

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

Hapi 5: Publikoni dhe testoni!

Kemi mbaruar! Aplikacioni juaj React tani do të përkthehet automatikisht kur të shtoni ndonjë tekst në komponentin Translate. Kini parasysh se vetëm mjediset me leje read/write mbi çelësin API do të jenë në gjendje të krijojnë tekste të reja për t'u përkthyer. Ne rekomandojmë të keni një ambient staging të mbyllur dhe të sigurt ku mund ta testoni aplikacionin tuaj të prodhimit me një çelës API të tillë, duke shtuar tekste të reja para se të bëhet i disponueshëm publikisht. Kjo do të parandalojë që dikush të vjedhë çelësin tuaj sekret të API-së dhe të mbingarkojë projektin tuaj të përkthimeve duke shtuar tekste të reja e të palidhura.

Sigurohuni 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, mos ngurroni 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 në dhe nga më shumë se 75 gjuhë. Filloni sot!