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

Kif jaħdem

Bħala kif id-dinja saret aktar globalizzata, huwa dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jissodisfaw utenti minn pajjiżi u kultura differenti. Wieħed mill-modi ewlenin biex jintlaħaq dan huwa permezz tal-internazzjonalizzazzjoni (i18n), li tippermetti li 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 għall-applikazzjoni React Next.js tiegħek, b’rendering fuq in-naħa tas-server. TL;DR: Ara l-eżempju sħiħ hawn.

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

Step 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 l-eżempju, se nużaw TacoTranslate.

TacoTranslate awtomatikament tittraduċi l-kordi tiegħek għal kwalunkwe lingwa billi tuża AI avvanzat, u jħallik liberu mill-maniġment tedjuż tal-fajls JSON.

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

npm install tacotranslate

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

Within the TacoTranslate application UI, oħloq proġett, u naviga għall-tab tal-API keys tiegħu. Oħloq ċavetta wieħed read, u ċavetta oħra read/write. Aħna se nħalluhom bħala varjabbli tal-ambjent. Il-cċavetta read hija dik li nsejħu public u l-cċavetta read/write hija secret. Per eżempju, tistaʼ iżżidhom f'file .env fil-għerq tal-proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tarmi l-key API sigriet read/write lejn l-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 default tal-lingwa ta’ fallback. F’dan l-eżempju, ser nissettjah għal en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-"folder" fejn ser jinżammu l-korda tiegħek, bħal URL tas-sit web 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, ikollok bżonn toħloq klijent billi tuża ċ-ċwievet API minn qabel. Pereżempju, oħloq fajl bl-isem /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 niddeterminaw b'mod awtomatiku TACOTRANSLATE_API_KEY dalwaqt.

Il-ħolqien tal-klijent f'ħlief file separat jagħmilha aktar faċli li jerġa' jintuża aktar tard. Issa, billi nużaw /pages/_app.tsx adattat, 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 personalizzati u _app.tsx, jekk jogħġbok estendi d-definizzjoni bil-proprjetajiet u l-kodiċi minn hawn fuq.

Pass 4: Implimentazzjoni ta’ server side rendering

TacoTranslate jippermetti r-rendering fuq in-naħa tas-server tat-traduzzjonijiet tiegħek. Dan ittejjeb ħafna l-esperjenza tal-utent billi juri l-kontenut tradott immedjatament, minflok juri qawwa ta’ kontenut mhux tradott għalkemm wieħed. 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 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.

Sakemm issa, konna ppreparajna l-applikazzjoni Next.js biss b’lista ta’ lingwi appoġġjati. L-affarijiet li jmiss ser nagħmlu huma li nġibu t-traduzzjonijiet għal kull paġna tiegħek. Għal dan, ser 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 issetjat 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 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!"/>;
}

Int tkun tista’ issa tuża l-komponent Translate biex tittraduċi l-ktejjebijiet fi ħdan il-komponenti kollha tar-React tiegħek.

import {Translate} from 'tacotranslate/react';

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

Pass 5: Ibiegħ u ipprova!

Lestna! L-applikazzjoni tiegħek ta’ Next.js issa se tiġi tradotta awtomatikament meta żżid kwalunkwe kordi ma’ Translate komponent. Innota li biss l-ambjenti b’permessi read/write fuq il-key tal-API jkunu jistgħu joħolqu kordijiet ġodda biex jiġu tradotti. Nirrakkomandaw li jkollok ambjent ta’ staging magħluq u sigur fejn tista’ testja l-applikazzjoni tal-produzzjoni tiegħek b’key API bħal dak, u żżid kordijiet ġodda qabel tmur ħaj. Dan se jipprevjeni lil xi ħadd milli jisirqlek il-key secret tal-API tiegħek, u potenzjalment ma jħallix li t-tħaddim tat-traduzzjoni tiegħek jiġi eżebbit b’kordijiet ġodda u mhux relatati.

Kun żgur li tħares lejn l-eżempju sħiħ fuq il-profil tagħna ta’ GitHub. Hemmhekk, ser issib ukoll eżempju ta’ kif tagħmel dan billi tuża App Router! Jekk tiffaċċja xi problemi, tħossok liberu li titkellem magħna, u nkunu kuntenti ħafna biex ngħinuk.

TacoTranslate jippermettilek li lokalizza awtomatikament l-applikazzjonijiet React tiegħek malajr għal u minn kwalunkwe lingwa. Ibda illum!