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

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ë përmbushin nevojat e 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ë të ndryshme, valuta dhe formate datash.

Në këtë tutorial, do të eksplorojmë se si të shtoni internacionalizimin në aplikacionin tuaj React Next.js, me renderim në anën e serverit. TL;DR: Shikoni 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ërkthe automatikisht tekstet tuaja në çdo gjuhë duke përdorur AI të avancuar, dhe ju çlironi 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 të lidhur. Krijoni një llogari këtu. Është falas, dhe nuk kërkon të shtoni një kartë krediti.

Brenda UI-së 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. Ne do t'i ruajmë si variabla mjedisi. Çelësi read është ai që ne 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ë ambientet e prodhimit në anën e klientit.

Ne do të shtojmë gjithashtu edhe dy variabla mjedisi: TACOTRANSLATE_DEFAULT_LOCALE dhe TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kodi i lokalizimit të parazgjedhur rezervë. 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 të internetit. Lexoni më shumë rreth origjinave këtu.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Hapi 3: Konfigurimi i TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 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 pageProps dhe _app.tsx të personalizuara, ju lutemi zgjerojeni definicionin me pronat dhe kodin nga më sipër.

Hapi 4: Zbatimi i renderimit në anën e shërbyesit

TacoTranslate lejon renderimin në server të përkthimeve tuaja. Kjo përmirëson ndjeshëm përvojën e përdoruesit duke treguar menjëherë përmbajtjen e përkthyer, në vend të një shfaqjeje të shkurtër të përmbajtjes së papërkthyer në fillim. Për më tepër, 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.

Deri më tani, ne e kemi vendosur aplikacionin Next.js vetëm me një listë të gjuhëve të mbështetura. Gjëja tjetër që do të bëjmë është të marrim përkthime 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 Next.js. Vini re se revalidate në getTacoTranslateStaticProps është vendosur në 60 si parazgjedhje, në mënyrë që përkthimet tuaja të mbeten të përditësuara.

Për të përdorur secilin funksion në një faqe, le të supozojmë se keni një skedar faqe 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 vargje brenda të gjitha komponentëve tuaj React.

import {Translate} from 'tacotranslate/react';

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

Hapi 5: Vendosni në prodhim dhe testoni!

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 në çelësin API do të mund ta 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ë publikoni. Kjo do të parandalojë që kushdo të vjedhë çelësin tuaj sekret API, dhe potencialisht të mbushë projektin tuaj të përkthimit duke shtuar vargje të reja, të pazbatuara.

Sigurohuni 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, ndihuni të lirë të na kontaktoni, dhe ne do të jemi më shumë se të lumtur të ndihmojmë.

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