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

Ahogy a világ egyre inkább globalizálódik, egyre fontosabbá válik a webfejlesztők számára, hogy olyan alkalmazásokat hozzanak létre, amelyek különböző országokból és kultúrákból származó felhasználókat is képesek kiszolgálni. Ennek egyik kulcsfontosságú módja az internacionalizáció (i18n), amely lehetővé teszi az alkalmazásod adaptálását különböző nyelvekre, valutákra és dátumformátumokra.

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

Ez az útmutató azoknak a Next.js alkalmazásoknak szól, amelyek a Pages Router-t 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 Next.js alkalmazásod nemzetközivé tételéhez először válasszunk 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 könyvtárat fogjuk használni.

A TacoTranslate a legmodernebb mesterséges intelligenciát használva automatikusan lefordítja a szövegeidet bármely nyelvre, és megszabadít a JSON fájlok fárasztó kezelésétől.

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

npm install tacotranslate

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

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

A TacoTranslate alkalmazás felületén hozz létre egy projektet, majd 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 hívjuk public kulcsnak, míg a read/write kulcs a secret kulcs. 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 rá, hogy a titkos read/write API kulcsot soha ne szivárogtasd ki a kliens oldali éles környezetekbe.

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 helyi beállítási kód. Ebben a példában en-re állítjuk az angol nyelvhez.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a sztringjeid tárolódnak, például a weboldalad URL-je. További információ 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 alkalmazásodhoz való integrálásához létre kell hoznod egy klienst a korábban megszerzett API kulcsok segítségével. Például hozz létre egy fájlt /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;

Rövidesen automatikusan meghatározzuk a TACOTRANSLATE_API_KEY értékét.

Az ügyfél létrehozása külön fájlban megkönnyíti a későbbi újrahasználatot. Most pedig, 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 rendelkezel egyedi pageProps és _app.tsx fájlokkal, kérjük, bővítsd a definíciót a fentebb említett 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 szerveroldali 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 le nem fordított tartalom villanását mutatná. Ezen felül kihagyhatjuk a hálózati kéréseket az ügyféloldalon, mert már rendelkezünk minden szükséges fordítással.

Azzal kezdjük, hogy 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 a isProduction ellenőrzést a saját környezetedhez igazítva. Ha true, a TacoTranslate a nyilvános API-kulcsot fogja használni. Ha lokális, teszt vagy staging környezetben vagyunk (isProduction is false), akkor a titkos read/write API-kulcsot használjuk, hogy az új szövegek biztosan elküldésre kerüljenek fordításra.

Eddig csak a Next.js alkalmazást állítottuk be egy támogatott nyelvek listájával. A következő lépés az lesz, hogy lekérjük az összes oldal fordításait. Ehhez az igényeid alapján vagy a getTacoTranslateStaticProps, vagy a getTacoTranslateServerSideProps függvényt fogod használni.

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

Ha bármelyik függvényt egy oldalon szeretnéd használni, tegyük fel, hogy van egy oldal fájlod, 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 a React komponenseidben található szövegek lefordítására.

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 szöveget hozzáadsz egy Translate komponenshez. Fontos megjegyezni, hogy csak azok a környezetek, amelyek rendelkeznek az API kulcs read/write jogosultságával, képesek új fordítandó szövegeket létrehozni. Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol egy ilyen API kulccsal tesztelheted a production alkalmazásodat, és hozzáadhatsz új szövegeket, mielőtt élesbe lépnél. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és potenciálisan felfújja a fordítási projektedet új, nem kapcsolódó szövegek hozzáadásával.

Ne felejtsd el megnézni a teljes példát GitHub profilunkon. Ott találsz majd egy példát arra is, hogyan kell ezt megcsinálni a App Router használatával! Ha bármilyen problémába ütköznél, nyugodtan keress meg minket, és szívesen segítünk.

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