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

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

Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan lehet internacionalizációt hozzáadni a React Next.js alkalmazásodhoz, szerveroldali rendereléssel. TL;DR: A teljes példát itt találod.

Ez az útmutató a Pages Router-t használó Next.js alkalmazásokhoz készült.
Ha a App Router-t használja, kérjük, tekintse meg inkább ezt az útmutatót.

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

Az internationalizáció megvalósításához a Next.js alkalmazásodban először ki fogunk választani egy i18n könyvtárat. Több népszerű könyvtár létezik, köztük a next-intl. Azonban ebben a példában a TacoTranslate használatával fogunk dolgozni.

A TacoTranslate fejlett MI segítségével automatikusan lefordítja a szövegeidet bármilyen nyelvre, és megszabadít az unalmas JSON fájlok kezelésétől.

Telepítsük a 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, itt az ideje, hogy létrehozd a TacoTranslate fiókodat, egy fordítási projektet és a hozzá tartozó API kulcsokat. Hozz létre itt fiókot. Ingyenes, és nem kell hozzá bankkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, és navigálj az API kulcsok fülre. Készíts egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változóként fogjuk elmenteni. A read kulcsot nevezzük public kulcsnak, míg a read/write kulcs 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

Ügyelj arra, hogy soha ne szivárogtasd ki a titkos read/write API kulcsot kliensoldali éles környezetbe.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék helyi beállítás kódja. Ebben a példában ezt en-re, azaz angolra állítjuk.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolódnak, például a weboldalad URL-je. Olvass többet az origin-ekről itt.

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

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

A TacoTranslate integrálásához az alkalmazásodba létre kell hoznod egy klienst a korábban megszerzett API kulcsok használatával. Például készíts egy fájlt /tacotranslate-client.js- névvel.

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;

Rövidesen automatikusan definiálni fogjuk a TACOTRANSLATE_API_KEY értékét.

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

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 egyedi pageProps és _app.tsx, kérjük, bővítse a definíciót a fenti tulajdonságokkal és kóddal.

4. lépés: Szerver oldali megjelenítés (server side rendering) megvalósítása

A TacoTranslate lehetővé teszi a fordításaid szerver oldali renderelését. Ez nagymértékben 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 le nem fordított tartalom jelenne meg. Ezen felül elkerülhetjük a hálózati kéréseket az ügyféloldalon, mert már minden szükséges fordítással rendelkezünk.

Azzal kezdjük, hogy létrehozzuk vagy módosítjuk a /next.config.js-t.

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

Alakítsa át a isProduction ellenőrzést a saját beállításainak 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 használjuk, hogy biztosítsuk az új szövegek fordításra küldését.

Eddig csak a Next.js alkalmazást állítottuk be a támogatott nyelvek listájával. A következő lépésben az összes oldal fordítását fogjuk lekérdezni. Ehhez a következők egyikét fogod használni: getTacoTranslateStaticProps vagy getTacoTranslateServerSideProps, az igényeidnek megfelelően.

Ezek a függvények három argumentumot vesznek fel: egy Next.js Static Props Context objektumot, a TacoTranslate konfigurációját, és opcionális Next.js tulajdonságokat. Vegye figyelembe, hogy a revalidate a getTacoTranslateStaticProps esetén alapértelmezés szerint 60-ra van állítva, hogy a fordításai naprakészek maradjanak.

Ahhoz, hogy bármelyik függvényt használja egy oldalon, tegyük fel, hogy van egy oldalfájlja, például /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 az összes React komponensedben található szövegek fordításához.

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! A React alkalmazásod mostantól automatikusan le lesz fordítva, amikor bármilyen sztringet hozzáadsz egy Translate komponenshez. Fontos megjegyezni, hogy csak azok a környezetek, amelyek rendelkeznek az read/write jogosultsággal az API kulcson, képesek új, lefordítandó sztringeket létrehozni. Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol az ilyen API kulccsal tudod tesztelni az élő alkalmazásodat, új sztringeket hozzáadva még a kiadás előtt. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és esetlegesen feleslegesen növelje a fordítási projekted méretét új, nem kapcsolódó sztringek hozzáadásával.

Ne felejtsd el megtekinteni a teljes példát GitHub profilunkon. Ott találsz majd példát arra is, hogyan csináld ezt 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 automatikusan lokalizáld több mint 75 nyelvre és vissza. Kezdd el még ma!