Zgjidhja më e mirë për ndërkombëtarizimin (i18n) në aplikacionet Next.js

Si funksionon

Ndërsa bota po bëhet më globale, është gjithnjë e më e rëndësishme që 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 kryesore për ta arritur këtë është përmes internacionalizimit (i18n), i cili ju lejon të përshtatini aplikacionin tuaj për gjuhë, monedha, dhe formatet e datave të ndryshme.

Në këtë udhëzues, do të eksplorojmë se si të shtoni internacionalizimin në aplikacionin tuaj React Next.js, me renderim në server. TL;DR: Shih 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, shikoni këtë udhëzues në vend të 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. Ekzistojnë 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 AI 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 të krijoni llogarinë tuaj TacoTranslate, një projekt përkthimi, dhe çelësat e API-së 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 shkoni te skeda 'API keys' e tij. Krijoni një çelës read dhe një çelës read/write. Do t'i ruajmë si variabla të mjedisit. Ç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ë çelësi sekret read/write i API-së të mos rrjedhë kurrë në mjediset e prodhimit 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 të parazgjedhur për rikthim. Në këtë shembull, do ta vendosim në en për anglishten.
• TACOTRANSLATE_ORIGIN: “dosja” ku do të ruhen tekstet tuaja, si p.sh. URL-ja e faqes suaj. Lexoni më shumë rreth originëve 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ë duhet të krijoni një klient duke përdorur çelësat e API-së të përmendur 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ë 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 vetitë dhe kodin nga më sipër.

Hapi 4: Zbatimi i renderimit në anën 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 të një shfaqjeje të shkurtër me përmbajtje të papërkthyer në fillim. Për më tepër, mund të shmangim kërkesat e rrjetit nga ana e klientit, sepse tashmë kemi të gjitha përkthimet që na duhen.

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

Rregulloni kontrollin isProduction në përputhje 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 të dërgohen për përkthim.

Deri më tani, kemi vetëm konfiguruar aplikacionin Next.js me një listë gjuhësh të mbështetura. Hapi i radhës ë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 veti opsionale të Next.js. Vini re që 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 cilindo 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 përfunduar! Aplikacioni juaj Next.js tani do të përkthehet automatikisht kur të shtoni çdo varg në një komponent Translate. Vini re se vetëm mjediset me lejet read/write në ç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 para se të publikohet. Kjo do të parandalojë që kushdo kushdo të vjedhë çelësin tuaj sekret API, dhe potencialisht të rrisë në mënyrë të panevojshme madhësinë e projektit tuaj të përkthimeve duke shtuar vargje të reja, të pa lidhura.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!