L-aqwa soluzzjoni għall-internazzjonalizzazzjoni (i18n) f'applikazzjonijiet Next.js

Kif taħdem

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

F’din it-tutorja, se nesploraw kif iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, bl-użu ta’ server side rendering. TL;DR: Ara l-eżempju kollu hawn.

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

Pass 1: Installa librerija i18n

Biex tniedi 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 il-eżempju, se nużaw TacoTranslate.

TacoTranslate jinterpreta awtomatikament l-strings tiegħek għal kwalunkwe lingwa bl-użu ta' AI avvanzata, u jħallik liberu mill-ġestjoni tedjuża ta' fajls JSON.

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

npm install tacotranslate

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

Issa li jkollok il-modulu installat, wasal iż-żmien li toħloq kont TacoTranslate tiegħek, proġett tat-traduzzjoni, u ċavett ta’ API assoċjat. Oħloq kont hawn. Huwa b'xejn, u ma jeħtieġlekx li żżid karta ta' kreditu.

Dentro l-UI tal-applikazzjoni TacoTranslate, oħloq proġett, u naviga għal tab tal-muftieħ API tiegħu. Oħloq wieħed read u wieħed read/write. Se nħallthom bħala varjabbli tal-ambjent. Il-muftieħ read huwa dak li nsejħulu public u l-muftieħ read/write huwa secret. Per eżempju, tista’ żżidhom f’fajl .env fil-fond ta’ proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tippermetti li tixxarrab is-sigriet read/write API key fl-ambjenti ta’ produzzjoni fuq in-naħa tal-klijent.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Il-kodiċi default tal-lingwa ta’ fallback. F’dan l-eżempju, se nissettjawh fuq en għal l-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-“folder” fejn jiġu maħżuna l-kordi 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

Step 3: Il-konfigurazzjoni ta’ TacoTranslate

Biex tintegra TacoTranslate mal-applikazzjoni tiegħek, ser ikollok bżonn toħloq client billi tuża l-API keys 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 awtomatikament 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 /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 minn 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 itejjeb ħafna l-esperjenza tal-utent billi juri l-kontenut tradott immedjatament, minflok flaŝ ta' kontenut mhux tradott l-ewwel. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għaliex diġà għandna l-kliem tradott kollu 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'),
	});
};

Immodifika ċ-ċekk isProduction biex ikun adattat għas-setup tiegħek. Jekk true, TacoTranslate se joħroġ iċ-ċavetta API pubblika. Jekk ninsabu f'ambjent lokali, tat-test, jew ta 'staging (isProduction is false), aħna nużaw iċ-ċavetta sigrieta read/write API biex niżguraw li stringi ġodda jintbagħtu għat-traduzzjoni.

Sa issa, għamilna biss is-settjar tal-applikazzjoni Next.js b'elenco ta' lingwi appoġġjati. L-affarijiet li jmiss li se nagħmlu huma li nġibu t-traduzzjonijiet għal kull paġna tiegħek. Biex nagħmlu dan, se tuża kemm getTacoTranslateStaticProps kif ukoll 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 issettjat għal 60 b’mod default, sabiex it-traduzzjonijiet tiegħek jibqgħu aġġornati.

Biex tuża kwalunkwe waħda mill-funzjonijiet fuq paġna, ejja nqisu 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!"/>;
}

Għandek issa tkun tista' tuża l-komponent Translate biex tittraduċi l-kords kollha ġewwa l-komponenti React tiegħek.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Implimenta u ipprova!

Qed spiċċajna! L-applikazzjoni tiegħek ta' Next.js issa se tiġi tradotta awtomatikament meta żżid kwalunkwe stringa f'komponent Translate. Żomm f’moħħok li biss l-ambjenti b’permessi read/write fuq il-key tal-API se jkollhom il-ħila li joħolqu stringi ġodda biex jittraduċew. Nirrakkomandaw li jkollok ambjent ta' staging magħluq u sikur fejn tista' tittestja l-applikazzjoni tal-produzzjoni tiegħek b'key tal-API bħal dak, billi żżid stringi ġodda qabel ma tmur live. Dan se jipprevjeni lil kull min milli jisraqlek il-key sigriet tal-API tiegħek, u potenzjalment jiżdied il-proġett tat-traduzzjoni tiegħek b'stringi ġodda u li ma jkunux 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!