L-aqwa soluzzjoni għall-internazzjonalizzazzjoni (i18n) fl-apps ta’ Next.js

Kif taħdem

Hekk kif id-dinja ssir aktar globalizzata, huwa 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-modi ewlenin biex jintlaħaq dan huwa permezz tal-internazzjonalizzazzjoni (i18n), li tippermettilek tadatta l-applikazzjoni tiegħek għal lingwi, muniti, u formati ta’ data differenti.

F’dan it-taħriġ, se nesploraw kif iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, b’rendiment fuq is-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 i18n

Biex nimpenjawru l-internazzjonalizzazzjoni fl-applikazzjoni Next.js tiegħek, l-ewwel 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 l-istejjer tiegħek għal kwalunkwe lingwa billi juża AI avvanzata, u jħallik liberu mill-ġestjoni tedjuża ta' fajls JSON.

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

npm install tacotranslate

Pass 2: Oħloq kont b'xejn ma' 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 API assoċjati. Oħloq kont hawn. Huwa ħieles, u ma jeħtieġlekx iżżid karta ta’ kreditu.

F'ħanut tal-applikazzjoni TacoTranslate, oħloq proġett, u naviga fil-tab tal-API keys tiegħu. Oħloq wieħed read key, u wieħed read/write key. Se ninżluhom bħala varjabbli ta’ l-ambjent. Il-read key huwa dak li insejħu public u l-read/write key huwa secret. Per eżempju, tista’ żż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 tirrilaxxa s-sigriet read/write API key għall-ambjenti tal-produzzjoni 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-lokalità ta’ fallback. F’dan l-eżempju, se nissettjawh għal en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-“folder” fejn jiġu maħżuna l-kordi tiegħek, bħal ir-URL tal-websajt 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, ser tkun għadek bżonn toħloq client bl-użu tal-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;

Aħna se nattivaw awtomatikament TACOTRANSLATE_API_KEY dalwaqt.

Il-ħolqien tal-klijent f’fajl separat jagħmilha aktar faċli li tużah 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 msemmijin 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 itejjeb b'mod sinifikanti l-esperjenza tal-utent billi juri kontenut imħaddem awtomatikament immedjatament, minflok ma juri flash ta' kontenut mhux tradott dejjem l-ewwel. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għaliex diġà għandna t-traduzzjonijiet kollha 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, sħabna biss l-applikazzjoni Next.js b'elenco ta' lingwi appoġġjati. L-ewwel ħaġa li se nagħmlu issa hi li nġibu t-traduzzjonijiet għal dawk il-paġni kollha tiegħek. Għal dan, tuża jew getTacoTranslateStaticProps jew getTacoTranslateServerSideProps ibbażata fuq ir-rekwiżiti tiegħek.

Dawn il-funzjonijiet jieħdu tlieta 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 stabbilit 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 niddependu 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-strings ġewwa l-komponenti kollha tiegħek ta' React.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Ibgħat u ipprova!

Lestna! L-applikazzjoni tiegħek ta’ Next.js issa se tkun tradotta awtomatikament meta żżid kwalunkwe ħajta ma' Translate komponent. Nota li biss ambjenti b’permessi read/write fuq il-API key se jkunu jistgħu joħolqu ħjiel ġodda biex jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta’ staging magħluq u sigur fejn tista’ tittestja l-applikazzjoni tal-produzzjoni tiegħek b’API key bħal dak, iżżid ħjiel ġodda qabel tmur live. Dan se jipprevjeni lil xi ħadd milli jisirqa l-API key sigriet tiegħek, u potenzjalment jimbotta l-proġett tat-traduzzjoni tiegħek billi iżid ħjiel ġodda u 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!