L-aħjar soluzzjoni għall-internazzjonalizzazzjoni (i18n) fl-applikazzjonijiet Next.js

Kif jaħdem

Bħalma d-dinja ssir aktar globalizzata, issir dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jservu 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 ta' data differenti.

F'dan it-tutorja, se nesploraw kif iżżid 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 il-Pages Router.
Jekk qed tuża l-App Router, ara din il-gwida minflok.

Pass 1: Installa librerija għall-i18n

Biex nimplimentaw 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 jitraduci awtomatikament is-strings tiegħek għal kwalunkwe lingwa billi juża AI avvanzata, u jiffrankalek mill-maniġġjar tedjanti tal-fajls JSON.

Ejja ninstallawh bl-użu ta' npm fit-terminal 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 il-kont tiegħek f'TacoTranslate, proġett ta' traduzzjoni, u ċwievet API assoċjati. Oħloq kont hawn. Huwa b'xejn, u ma jeħtieġlekx li żżid karta tal-kreditu.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tesponi is-segreta 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 default tal-lokal li jintuża bħala fallback. F'dan l-eżempju, se nissettjawh bħala en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-«folder» fejn se jinżammu l-stringijiet tiegħek, bħal l-URL tal-websajt tiegħek. Aqra aktar dwar l-origini hawn.

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

Pass 3: Issettjar ta' TacoTranslate

Biex tintegra TacoTranslate fl-applikazzjoni tiegħek, għandek bżonn toħloq klijent billi tuża l-muftieħiet 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 nkunu qed niddefinixxu b'mod awtomatiku TACOTRANSLATE_API_KEY dalwaqt.

Il-ħolqien tal-klijent f'fajl separat jagħmilha aktar faċli li jintuża mill-ġdid aktar tard. Issa, billi nużaw fajl /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 tar-rendering fuq in-naħa tas-server

TacoTranslate jippermetti rendering fuq in-naħa tas-server tat-traduzzjonijiet tiegħek. Dan itejjeb b'mod konsiderevoli l-esperjenza tal-utent billi juri l-kontenut tradott immedjatament, minflok flash 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.

Nibdew billi noħolqu jew nbiddlu /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-konfigurazzjoni tiegħek. Jekk true, TacoTranslate se juri l-ċavetta API pubblika. Jekk ninsabu f'ambjent lokali, ta' test, jew ta' staging (isProduction is false), se nużaw il-ċavetta API sigrieta read/write biex niżguraw li t-testi ġodda jintbagħtu għat-traduzzjoni.

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

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

Biex tuża kwalunkwe mill-funzjonijiet f'paġna, ejja nassumu 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 t-test f'kull wieħed mill-komponenti React tiegħek.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Tniedi u ittestja!

Għamilna! L-applikazzjoni Next.js tiegħek issa se tiġi tradotta awtomatikament meta żżid kwalunkwe stringa fi komponent Translate. Innota li biss l-ambjenti b’permessi read/write fuq iċ-ċavetta tal-API se jkunu jistgħu joħolqu stringi ġodda biex jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta' staging magħluq u sigur fejn tista' tittestja l-applikazzjoni tiegħek fil-produzzjoni b'ċavetta tal-API bħal dik, u żżid stringi ġodda qabel ma tmur live. Dan se jipprevjeni lil xi ħadd xi ħadd milli jisraq iċ-ċavetta sigrieta tal-API tiegħek, u potenzjalment jagħmel il-proġett tat-traduzzjoni tiegħek iktar kbir b'mod mhux mixtieq billi jżid stringi ġodda mhux relatati.

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!