Kif tapplika l-internazzjonalizzazzjoni f’applikazzjoni Next.js li qed tuża App Router

Bħal-dinja saret aktar globalizzata, huwa dejjem aktar importanti għall-iżviluppaturi tal-web li jibnu applikazzjonijiet li jistgħu jindirizzaw utenti minn pajjiżi u kulturi differenti. Wieħed mill-modi ewlenin biex dan jintlaħaq huwa permezz tal-internazzjonalizzazzjoni (i18n), li tippermettilek tadatta l-applikazzjoni tiegħek għal lingwi, muniti, u formati ta’ data differenti.

F’dan l-artiklu, se niddiskutu kif tista’ iżżid l-internazzjonalizzazzjoni fl-applikazzjoni React Next.js tiegħek, bl-użu tas-server side rendering. TL;DR: Ara l-eżempju sħiħ hawn.

Dan il-gwida hija għaċ-Ċrieki ta' Next.js li qed jużaw il-App Router.
Jekk qed tuża Pages Router, ara din il-gwida minflok.

Pass 1: Installa librerija i18n

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

TacoTranslate jittraduċi awtomatikament il-korda tiegħek għal kwalunkwe lingwa billi juża l-intelliġenza artifiċjali avvanzata, u jgħinek tħalli l-ġestjoni tedjuża ta' fajls JSON.

Ejjew ninstallawh permezz ta' 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 kont TacoTranslate tiegħek, proġett ta' traduzzjoni, u l-keys API assoċjati. Oħloq kont hawn. Huwa b'xejn, u ma jibqax meħtieġ li żżid karta ta' kreditu.

Binnen l-UI tal-applikazzjoni TacoTranslate, oħloq proġett, u mur fit-tab tal-keys tal-API tiegħu. Oħloq waħda read key, u waħda read/write key. Se nħażżuhom bħala varjabbli tal-ambjent. Il-key read hija dik li nsejħu public u l-key read/write hija secret. Pereżempju, tista’ żżidhom f’fajl .env fir-root tal-proġett tiegħek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Kun żgur li qatt ma tħallix li l-kenva sigrieta read/write tal-API tinħareġ lejn l-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 tal-lokal default ta’ fallback. F’dan l-eżempju, se niddefinixxuh bħala en għall-Ingliż.
• TACOTRANSLATE_ORIGIN: Il-“folder” fejn se jinżammu l-kliem tiegħek, bħal l-URL tal-websajt tiegħek. Iqra aktar dwar l-origini hawn.

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

Pass 3: Twaqqif ta’ TacoTranslate

Biex tintegra TacoTranslate ma’ l-applikazzjoni tiegħek, ser ikollok bżonn toħloq klient billi tuża l-aktar kmieni l-muftieħ tal-API. 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Aħna se niffissaw b’mod awtomatiku TACOTRANSLATE_API_KEY u TACOTRANSLATE_PROJECT_LOCALE dalwaqt.

Il-ħolqien tal-klijent f’fajl separata jagħmilha faċli biex tużah mill-ġdid aktar tard. getLocales hija biss funzjoni ta’ utilità b’xi ħarsien mill-iżbalji mibni ġewwa. Issa, oħloq fajl imsejjaħ /app/[locale]/tacotranslate.tsx, fejn se nimplementaw il-fornitur TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Noti 'use client'; li tindika li dan huwa komponent tal-klijent.

Billi l-fornitur tal-kuntest huwa lest biex jintuża, oħloq fajl imsejjaħ /app/[locale]/layout.tsx, il-layout bażiku fl-applikazzjoni tagħna. Nota li dan il-perkorż għandu folder li juża Dynamic Routes, fejn [locale] huwa l-parametru dinamiku.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

L-ewwel ħaġa li għandek iżżomm f’moħħok hawnhekk hi li qed nużaw il-parametru Dynamic Route tagħna [locale] biex nieħdu t-traduzzjonijiet għal dik il-lingwa. Barra minn hekk, generateStaticParams qed tiżgura li l-kodiċi kollha tal-lokalitajiet li attivajt għall-proġett tiegħek ikunu pre-rendered.

Issa, ejja nibnu l-ewwel paġna tagħna! Oħloq fajl b’isem /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Note the revalidate varjabbli li jgħid lil Next.js biex jerġa’ jibni l-paġna wara 60 sekonda, u sabiex iżomm it-traduzzjonijiet tiegħek aġġornati.

Pass 4: Implimentazzjoni tat-tqassim fuq in-naħa tas-server

TacoTranslate jappoġġja server side rendering. Dan itejjeb ħafna l-esperjenza tal-utent billi juri kontenut tradott immedjatament, minflok flash ta’ kontenut mhux tradott fil-bidu. Barra minn hekk, nistgħu nevitaw it-talbiet tan-netwerk fuq il-klijent, għax diġà għandna t-traduzzjonijiet li għandna bżonn għall-paġna li l-utent qed jara.

Biex tissettja server side rendering, oħloq jew ibdel /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Ibdel il-verifika isProduction biex taqbel mas-settjar tiegħek. Jekk true, TacoTranslate se juri l-mappa pubblika tal-API key. Jekk qegħdin f’ambjent lokali, ta’ test, jew staging (isProduction is false), se nużaw il-mappa sigrieta read/write tal-API key biex niżguraw li strixxi ġodda jintbagħtu għall-kwalita tat-traduzzjoni.

Biex niżguraw li r-rotta u r- reindirizzar jaħdmu kif mistenni, se jkollna noħolqu fajl imsejjaħ /middleware.ts. Bl-użu ta' Middleware, nistgħu nirriindirizzaw lill-utenti lejn paġni ppreżentati bil-lingwa preferuta tagħhom.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Kun żgur li tagħmel is-settings tal-matcher skont id-dokumentazzjoni tal-Next.js Middleware.

Fil-klijent, tista’ tbiddel il-kookie locale biex tbiddel il-lingwa preferuta tal-utent. Jekk jogħġbok ara l-eżempju komplut tal-kodiċi għal ideat dwar kif tagħmel dan!

Pass 5: Ibiegħed u ipprova!

Issa wasalna! L-applikazzjoni React tiegħek se tiġi tradotta awtomatikament meta żżid kwalunkwe strings ma’ komponent Translate. Innota li biss l-ambjenti bi permessi read/write fuq il-API key jkunu jistgħu joħolqu strings ġ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, żid strings ġodda qabel ma tmur live. Dan jipprevjeni lil ħadd milli jisraqlek il-API key sigriet tiegħek, u potenzjalment jimbotta l-proġett tat-traduzzjoni tiegħek billi jżid strings ġ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 Pages 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!