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

Kif jaħdem

Hekk kif id-dinja ssir aktar globalizzata, issir dejjem aktar importanti għal żviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jilħqu utenti minn pajjiżi u kulturi differenti. Waħda mill-modi ewlenin biex dan jinkiseb hija 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 mal-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 Pages Router.
Jekk qed tuża App Router, ara din il-gwida minflok.

Pass 1: Installa librerija għall-i18n

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

TacoTranslate jittraduċi awtomatikament it-testijiet tiegħek għal kwalunkwe lingwa bl-użu ta’ intelliġenza artifiċjali avvanzata, u jiffrankalek mill-immaniġġjar tedjanti tal-fajls JSON.

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

npm install tacotranslate

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

Issa li għandek il-modul installat, wasal iż-żmien li toħloq kont TacoTranslate tiegħek, 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.

Fl-interfaċċja tal-applikazzjoni TacoTranslate, oħloq proġett u mur fit-tab tal-API keys tagħha. Oħloq wieħed read key, u wieħed read/write key. Se ninħażnuhom bħala varjabbli tal-ambjent. Il-read key huwa dak li nsejħu public u l-read/write key huwa secret. Per eżempju, tista' iżżidhom f'fajl .env fil-għerq tal-proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

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

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

Pass 3: Twaqqif ta' TacoTranslate

Biex tintegra TacoTranslate mal-applikazzjoni tiegħek, se jkollok toħloq klient billi tuża l-ċwievet tal-API li semmejna qabel. Pereż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 awtomatikament dalwaqt.

Il-ħolqien tal-klijent f'fajl separat jagħmilha aktar faċli li jintuża mill-ġdid aktar tard. Issa, billi nużaw /pages/_app.tsx personalizzat, se nżidu l-fornitur 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 msemmija hawn fuq.

Pass 4: Implimentazzjoni tar-rendering fuq in-naħa tas-server

TacoTranslate jippermetti rendering fuq is-server tat-traduzzjonijiet tiegħek. Dan itejjeb b'mod sinifikanti 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 t-traduzzjonijiet kollha li għandna bżonn.

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

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

Sa issa, aħna għamilna biss l-issettjar tal-applikazzjoni Next.js b'lista ta' lingwi appoġġati. Il-pass li jmiss se jkun li nġibu t-traduzzjonijiet għal kull paġna tiegħek. Biex tagħmel dan, tista' tuża jew getTacoTranslateStaticProps jew getTacoTranslateServerSideProps skont il-ħtiġijiet 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. Nota li revalidate fuq getTacoTranslateStaticProps huwa missettjat fuq 60 b'mod predefinit, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.

Biex tuża kwalunkwe minn dawn il-funzjonijiet f'paġna, ejja nieħdu 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 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!

Għamilna! Issa l-applikazzjoni Next.js tiegħek 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 għandhom jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta' staging magħluq u sigur fejn tista' tittestja l-applikazzjoni tal-produzzjoni tiegħek ma' ċ-ċavetta tal-API bħal dik, billi iżżid stringi ġodda qabel ma tmur online. Dan se jipprevjeni lil kull min kull min milli jisraq iċ-ċavetta tal-API sigrieta tiegħek, u potenzjalment jespandi b'mod mhux mixtieq il-proġett tat-traduzzjoni tiegħek 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!