Hogyan valósítsuk meg a nemzetközivé tételt egy Next.js alkalmazásban, amely a Pages Router-t használja

Ahogy a világ egyre globálisabbá válik, egyre fontosabbá válik a webfejlesztők számára, hogy olyan alkalmazásokat építsenek, amelyek képesek kiszolgálni a különböző országokból és kultúrákból érkező felhasználókat. Ennek egyik kulcsfontosságú módja az internacionalizáció (i18n), amely lehetővé teszi, hogy alkalmazásodat különböző nyelvekhez, valutákhoz és dátumformátumokhoz igazítsd.

Ebben a bemutatóban megvizsgáljuk, hogyan adhatsz hozzá internacionalizációt a React Next.js alkalmazásodhoz, szerveroldali rendereléssel. TL;DR: Teljes példát itt találsz.

Ez az útmutató azoknak a Next.js alkalmazásoknak szól, amelyek a Pages Router használják.
Ha a App Router-t használja, kérjük, tekintse meg helyette ezt az útmutatót.

1. lépés: Telepíts egy i18n könyvtárat

A nemzetköziesítés megvalósításához a Next.js alkalmazásodban először ki kell választanunk egy i18n könyvtárat. Számos népszerű könyvtár létezik, többek között a next-intl. Azonban ebben a példában a TacoTranslate használatát mutatjuk be.

A TacoTranslate a legmodernebb MI segítségével automatikusan lefordítja a szövegeidet bármilyen nyelvre, és felszabadít a JSON fájlok fárasztó kezelésétől.

Telepítsük az npm segítségével a terminálodban:

npm install tacotranslate

2. lépés: Hozz létre egy ingyenes TacoTranslate fiókot

Most, hogy telepítetted a modult, ideje létrehozni a TacoTranslate fiókodat, egy fordítási projektet és a kapcsolódó API kulcsokat. Hozz létre egy fiókot itt. Ingyenes, és nem kell hozzá hitelkártyát megadnod.

A TacoTranslate alkalmazás UI-jában hozz létre egy projektet, és navigálj az API kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk elmenteni. A read kulcsot nevezzük public kulcsnak, a read/write kulcs pedig a secret. Például hozzáadhatod őket egy .env fájlhoz a projekted gyökérkönyvtárában.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Győződj meg róla, hogy soha ne szivárogtasd ki a titkos read/write API kulcsot a kliens oldali éles környezetekben.

Hozzáadunk még két környezeti változót is: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett visszaesési nyelvkód. Ebben a példában az en-t állítjuk be angolra.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolva lesznek, például a weboldalad URL-je. További információ az originről itt olvasható.

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

3. lépés: TacoTranslate beállítása

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 TACOTRANSLATE_API_KEY értékét hamarosan automatikusan fogjuk beállítani.

A kliens létrehozása egy külön fájlban megkönnyíti annak későbbi újrafelhasználását. Most, egy egyedi /pages/_app.tsx használatával hozzáadjuk a TacoTranslate providert.

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>
	);
}

Ha már van egyéni pageProps és _app.tsx, kérjük, egészítse ki a definíciót a fentiekben szereplő tulajdonságokkal és kóddal.

4. lépés: Szerver oldali renderelés megvalósítása

A TacoTranslate lehetővé teszi a fordítások szerver oldali renderelését. Ez jelentősen javítja a felhasználói élményt azáltal, hogy azonnal megjeleníti a lefordított tartalmat, ahelyett, hogy először egy pillanatra nem lefordított tartalom jelenne meg. Emellett kihagyhatjuk a hálózati kéréseket a kliens oldalon, mivel már rendelkezünk minden szükséges fordítással.

Az első lépésként létrehozzuk vagy módosítjuk a /next.config.js fájlt.

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'),
	});
};

Módosítsd az isProduction ellenőrzést a saját beállításodnak megfelelően. Ha true, a TacoTranslate a nyilvános API kulcsot fogja használni. Ha helyi, teszt vagy staging környezetben vagyunk (isProduction is false), akkor a titkos read/write API kulcsot fogjuk használni, hogy az új szövegek fordításra kerüljenek elküldve.

Eddig csak a Next.js alkalmazást állítottuk be a támogatott nyelvek listájával. A következő dolog, amit megteszünk, az az, hogy lekérjük az összes oldalad fordítását. Ehhez getTacoTranslateStaticProps vagy getTacoTranslateServerSideProps kell használnia az Ön igényei szerint.

Ezek a függvények három argumentumot vesznek fel: egy Next.js Static Props Context objektum, a TacoTranslate konfigurációja és az opcionális Next.js tulajdonságok. Vegye figyelembe, hogy a getTacoTranslateStaticProps-on revalidate alapértelmezés szerint 60-ra van állítva, így a fordítások naprakészek maradnak.

Ha bármelyik függvényt használni szeretné egy oldalon, tegyük fel, hogy van egy lapozófájlja, mint például a /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!"/>;
}

Most már képesnek kell lenned arra, hogy használd a Translate komponenst a szövegek fordítására az összes React komponensedben.

import {Translate} from 'tacotranslate/react';

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

5. lépés: Telepítés és tesztelés!

Kész vagyunk! Mostantól a React alkalmazásod automatikusan le lesz fordítva, amikor bármilyen sztringet hozzáadsz a Translate komponenshez. Ne feledd, hogy csak azok a környezetek, melyek rendelkeznek read/write jogosultsággal az API kulcson, képesek új sztringeket létrehozni fordításra. Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol az éles alkalmazásodat egy ilyen API kulccsal tesztelheted, új sztringeket hozzáadva még a kiadás előtt. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és esetleg fölöslegesen növelje a fordítási projekted méretét új, nem kapcsolódó sztringek hozzáadásával.

Győződj meg róla, hogy megtekinted a teljes példát a GitHub profilunkon. Ott találsz egy példát arra is, hogyan kell ezt megtenni App Router használatával! Ha bármilyen problémába ütköznél, nyugodtan keress meg minket, és örömmel segítünk.

A TacoTranslate lehetővé teszi, hogy React alkalmazásaidat gyorsan és automatikusan lokalizáld bármely nyelvre és bármely nyelvről. Kezdd el még ma!