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

Kif jaħdem

Bħalma d-dinja ssir aktar globalizzata, saret dejjem aktar importanti għall-iż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 hi l-internazzjonalizzazzjoni (i18n), li tippermettilek tadatta l-applikazzjoni tiegħek għal lingwi, muniti u formati ta' data differenti.

F'dan it-tutorja, ser nesploraw kif iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, bil-rendering fuq is-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 ta' i18n

Sabiex nimplementaw 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 jtargmal awtomatikament is-siltiet tiegħek għal kwalunkwe lingwa bl-użu ta' AI avvanzat, u jħallik mingħajr il-maniġġ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 ta' TacoTranslate

Issa li għandek il-modulu installat, wasal iż-żmien li toħloq il-kont tiegħek ta' TacoTranslate, proġett ta' traduzzjoni, u ċwievet tal-API assoċjati. Oħloq kont hawn. Huwa b'xejn, u ma jirrikjedikx 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 nżommuhom bħala varjabbli tal-ambjent. Il-ċavetta read hija dik li ninsejħu public u l-ċavetta read/write 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 tixxarrab is-sigriet read/write tal-API fl-ambjenti ta' 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-lokal tal-fallback predefinit. F'dan l-eżempju, se nissettjawh fuq en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-“folder” fejn jinżammu s-siltiet testwali tiegħek, bħal pereżempju 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, trid toħloq client li już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 nkunu qed 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 tuża /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: Implementazzjoni tal-rendering fuq in-naħa tas-server

TacoTranslate jippermetti li t-traduzzjonijiet tiegħek jiġu renduti fuq in-naħa tas-server. 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 neħtieġu.

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-verifika ta' isProduction biex taqbel mal-konfigurazzjoni 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), nużaw il-ċavetta tal-API sigrieta read/write biex niżguraw li l-stringijiet ġodda jintbagħtu għat-traduzzjoni.

Sa issa, kkonfigurajna l-applikazzjoni Next.js biss b'lista tal-lingwi appoġġjati. Il-pass li jmiss huwa 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 opzjonali ta' Next.js. Innota li revalidate fuq getTacoTranslateStaticProps huwa stabbilit għal 60 b'default, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.

Biex tuża kwalunkwe waħda mill-funzjonijiet f'paġna, ejja nissuponew 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 l-kontenut testwali fil-komponenti kollha tiegħek ta' React.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Ippubblika u ittestja!

Għamilna! L-applikazzjoni tiegħek ta' Next.js issa se tiġi tradotta awtomatikament meta iżżid kwalunkwe stringa fil-komponent Translate. Nota li biss l-ambjenti li għandhom 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 mħares fejn tista' tittestja l-applikazzjoni tal-produzzjoni tiegħek b'ċavetta tal-API bħal dik, u żżid stringi ġodda qabel ma tmur fil-produzzjoni. Dan jipprevjeni lil ħadd milli jisirqa ċ-ċavetta tal-API sigrieta tiegħek, u potenzjalment jkabbar 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!