Kif timplimenta internazzjonalizzazzjoni f'applikazzjoni Next.js li qed tuża 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ħall-applikazzjonijiet Next.js li qed jużaw Pages Router.
Jekk qed tuża App Router, jekk jogħġbok ara din il-gwida minflok.

Pass 1: Installa librerija għall-i18n

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

TacoTranslate jitraduci awtomatikament il-kordi tat-test tiegħek għal kwalunkwe lingwa bl-użu ta’ AI avvanzat, u jiffranka lilek mill-immaniġġjar tedjuż tal-fajls JSON.

Ejja ninstallawh billi nużaw npm fil-terminal tiegħek:

npm install tacotranslate

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

Issa li għandek il-modulu installat, wasal iż-żmien li toħloq kont fuq TacoTranslate, proġett ta' traduzzjoni, u ċwievet API assoċjati. Oħloq kont hawn. Hu b'xejn, u ma jeħtieġlekx 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 ċavetta read, u ċavetta read/write. Se nħażnuhom bħala varjabbli tal-ambjent. Il-read ċavetta hija dak li nsejħu public, u l-read/write ċavetta hija secret. Per eżempju, tista' iżżidhom f'fajl .env fil-root tal-proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tesponi l-API key sigrieta read/write f'ambjenti ta' 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-lokalità li jintuża bħala fallback predefinit. F’dan l-eżempju, se nissettjawh għal en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il “folder” fejn jinżammu l-stringijiet tiegħek, bħal pereżempju l-URL tal-websajt tiegħek. Aqra aktar dwar l-oriġini hawn.

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

Pass 3: Issettjar ta' TacoTranslate

Biex tintegra TacoTranslate fl-applikazzjoni tiegħek, trid toħloq client billi tuża ċ-ċwievet tal-API msemmija 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 TACOTRANSLATE_API_KEY b'mod awtomatiku dalwaqt.

Li toħloq il-klijent f'fajl separati jagħmilha aktar faċli li jintuża mill-ġdid aktar tard. Issa, billi nużaw /pages/_app.tsx personalizzat, se nżidu l-provajder 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 minn 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 ittejjeb ħafna l-esperjenza tal-utent billi juri kontenut tradott immedjatament, minflok flikkratura ta' kontenut mhux tradott fil-bidu. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għax diġà għandna t-traduzzjonijiet kollha li għandna bżonn.

Se 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, stabbilajna biss l-applikazzjoni Next.js b'lista ta' lingwi appoġġati. Il-pass li jmiss se jkun li nġibu t-traduzzjonijiet għall-paġni kollha tiegħek. Biex tagħmel dan, ser tuża jew getTacoTranslateStaticProps jew getTacoTranslateServerSideProps skond 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 opzjonali ta' Next.js. Innota li revalidate fuq getTacoTranslateStaticProps huwa settjat għal 60 b'mod predefinit, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.

Biex tuża kwalunkwe mill-funzjonijiet f'paġna, nassumu li għandek fajl tal-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 l-kordi f'kull wieħed mill-komponenti React tiegħek.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Ittella u ittestja!

Tlestajna! L-applikazzjoni React tiegħek issa se tiġi tradotta awtomatikament meta iżżid kwalunkwe stringa f'komponent Translate. Nota li biss l-ambjenti b’permessi read/write fuq iċ-ċavetta tal-API jkunu jistgħu joħolqu stringi ġodda għat-traduzzjoni. 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 titnieda. Dan se jipprevjeni li xi ħadd xi ħadd jisraq iċ-ċavetta sigrieta tal-API tiegħek, u potenzjalment jżid b'mod eċċessiv il-proġett tat-traduzzjoni tiegħek billi jżid stringi ġodda mhux relatati.

Kun żgur li tiċċekkja l-eżempju sħiħ fuq il-profil tagħna fuq GitHub. Hemmhekk, issib ukoll eżempju ta' kif tagħmel dan billi tuża App Router! Jekk tiffaċċja xi problemi, tħossok liberu tikkuntattjana, u nkunu aktar minn kuntenti li ngħinuk.

TacoTranslate jippermetti li l-applikazzjonijiet React tiegħek jiġu lokalizzati b'mod awtomatiku u malajr lejn u minn aktar minn 75 lingwa. Ibda illum!