Kif timplimenta l-internazzjonalizzazzjoni f'applikazzjoni Next.js li qed tuża l-Pages Router

Hekk kif id-dinja ssir aktar globalizzata, saret dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jilqgħu lill-utenti minn pajjiżi u kulturi differenti. Wieħed mill-modi ewlenin biex dan jintlaħaq huwa permezz tal-internazzjonalizzazzjoni (i18n), li tippermettilek tadatta l-applikazzjoni tiegħek għal lingwi, muniti, u formati tad-data differenti.

F'dan it-tutorjal, se nesploraw kif iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, bil-rendering fuq in-naħa tas-server. TL;DR: Ara l-eżempju sħiħ hawn.

Din il-gwida hija għal applikazzjonijiet Next.js li qed jużaw il-Pages Router.
Jekk qed tuża l-App Router, jekk jogħġbok ara din il-gwida minflok.

Pass 1: Installa librerija i18n

Biex nimplementaw l-internazzjonalizzazzjoni fl-applikazzjoni Next.js tiegħek, l-ewwel nagħżlu librerija i18n. Hemm diversi libreriji popolari, inkluż next-intl. Madankollu, f'dan l-eżempju, se nużaw TacoTranslate.

TacoTranslate jittraduċi awtomatikament it-testijiet tiegħek għal kwalunkwe lingwa billi juża AI avvanzata, u jiffranka lilek mill-immaniġġjar tedjanti tal-fajls JSON.

Ejja ninstallawh bl-użu ta' npm fiterminal tiegħek:

npm install tacotranslate

Pass 2: Oħloq kont b'xejn ta' TacoTranslate

Issa li għandek il-modulu installat, wasal iż‑żmien li toħloq kont ta’ TacoTranslate, proġett ta’ traduzzjoni, u ċwievet API assoċjati. Oħloq kont hawn. Huwa b’xejn, u ma jeħtieġx li żżid karta ta’ kreditu.

Fil-UI tal-applikazzjoni TacoTranslate, oħloq proġett u mur fit-tab tal-API keys tagħha. Oħloq waħda read ċavetta, u waħda read/write ċavetta. Se ninħażnuhom bħala varjabbli tal-ambjent. Il-read ċavetta hija dik li nsejħu public, u l-read/write ċavetta hija secret. Per eżempju, tista' iżżidhom fil-fajl .env fir-root tal-proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tesponi is-sigrieta read/write ċavetta tal-API fl-ambjenti tal-produzzjoni fuq in-naħa tal-klijent.

Se nżidu wkoll żewġ varjabbli tal-ambjent: TACOTRANSLATE_DEFAULT_LOCALE u TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il-kodiċi tal-lokal tal-fallback default. F'dan l-eżempju, se nissettjawh għal en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-“folder” fejn se jinżammu l-strings tiegħek, bħall-URL tas-sit tiegħek. Aqra aktar dwar l-origini hawn.

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

Pass 3: Konfigurazzjoni ta' TacoTranslate

Biex tintegra TacoTranslate ma' l-applikazzjoni tiegħek, se jkollok bżonn toħloq klijent bl-użu ta' ċwievet tal-API minn qabel. Per eżempju, oħloq fajl imsejjaħ /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;

Se niddefinixxu awtomatikament TACOTRANSLATE_API_KEY dalwaqt.

Li toħloq il-klijent f'fajl separat jagħmilha iktar faċli li jintuża mill-ġdid aktar tard. Issa, billi nużaw /pages/_app.tsx personalizzat, se nżidu l-provider 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>
	);
}

Jekk diġà għandek pageProps u _app.tsx personalizzati, jekk jogħġbok estendi d-definizzjoni bil-proprjetajiet u l-kodiċi ta' hawn fuq.

Pass 4: Implementazzjoni tal-rendering fuq in-naħa tas-server

TacoTranslate jippermetti rendering fuq in‑naħa tas‑server tat‑traduzzjonijiet tiegħek. Dan jtejjeb ħafna l‑esperjenza tal‑utent billi juri l‑kontenut tradott immedjatament, minflok flash ta' kontenut mhux tradott fil‑bidu. Barra minn hekk, nistgħu nevitaw talbiet tan‑netwerk fuq il‑klijent, għax diġà għandna l‑traduzzjonijiet kollha li għandna bżonn.

Nibdew billi noħolqu jew nimmodifikaw /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'),
	});
};

Aġġusta l-kontroll isProduction biex jaqbel mal-issettjar tiegħek. Jekk true, TacoTranslate se juri l-ċavetta tal-API pubblika. Jekk ninsabu f'ambjent lokali, ta' test jew ta' staging (isProduction is false), se nużaw il-ċavetta sigrieta read/write tal-API biex niżguraw li t-testi ġodda jintbagħtu għat-traduzzjoni.

Sa issa, konna ssettjajna biss l-applikazzjoni Next.js b'lista ta' lingwi appoġġjati. Il-pass li jmiss hu li se nġibu t-traduzzjonijiet għal kull paġna tiegħek. Biex tagħmel dan, se tuża jew getTacoTranslateStaticProps jew getTacoTranslateServerSideProps skont ir-rekwiżiti tiegħek.

Dawn il-funzjonijiet jieħdu tliet argumenti: oġġett Next.js Static Props Context, konfigurazzjoni għal TacoTranslate, u proprjetajiet fakultattivi ta' Next.js. Nota li revalidate fuq getTacoTranslateStaticProps huwa stabbilit għal 60 b'mod predefinit, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.

Biex tuża kwalunkwe mill-funzjonijiet f'paġna, ejja nissupponu li għandek fajl ta' paġna bħal /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!"/>;
}

Issa għandek tkun tista' tuża l-komponent Translate biex tittraduċi testi f'kull wieħed mill-komponenti React tiegħek.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Ippubblika u ittestja!

Wasalna! L-applikazzjoni React tiegħek issa se tiġi tradotta awtomatikament meta żżid kwalunkwe stringa f'komponent Translate. Innota li biss l-ambjenti b'permessi read/write fuq iċ-ċavetta tal-API se jkunu jistgħu joħolqu stringi ġodda li jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta' staging magħluq u sigur fejn tista' tittestja l-applikazzjoni tal-produzzjoni tiegħek b'ċavetta tal-API bħal dik, u żżid stringi ġodda qabel ma tmur live. Dan se jipprevjeni lil ħadd milli jisraq iċ-ċavetta tal-API sigrieta tiegħek, u potenzjalment milli jġib żieda mhux mixtieqa fil-proġett tat-traduzzjoni tiegħek billi jżid stringi ġodda mhux relatati.

Kun żgur li tara l-eżempju sħiħ fuq il-profil tagħna fuq GitHub. Hemm, ssib ukoll eżempju ta' kif tagħmel dan billi tuża App Router! Jekk tiltaqa' ma' xi problemi, tħossok liberu li tikkuntattjana, u nkunu kuntenti ħafna ngħinuk.

TacoTranslate jippermetti li lokalizza awtomatikament l-applikazzjonijiet React tiegħek b'mod mgħaġġel lejn u minn aktar minn 75 lingwa. Ibda illum!