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

Ahogy a világ egyre globalizáltabbá válik, egyre fontosabb, hogy a webfejlesztők olyan alkalmazásokat építsenek, amelyek különböző országokból és kultúrákból érkező felhasználókat is kiszolgálni tudnak. Az egyik kulcsfontosságú módja ennek az internacionalizáció (i18n), amely lehetővé teszi az alkalmazás különböző nyelvekhez, valutákhoz és dátumformátumokhoz való igazítását.

Ebben a bemutatóban megvizsgáljuk, hogyan adhatjuk hozzá az internacionalizációt React Next.js alkalmazásunkhoz szerveroldali rendereléssel. TL;DR: A teljes példát itt találod.

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

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

A Next.js alkalmazás nemzetköziesítésé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 next-intl. Azonban ebben a példában a TacoTranslate könyvtárat fogjuk használni.

A TacoTranslate a legmodernebb mesterséges intelligencia segítségével automatikusan lefordítja az Ön sztringjeit bármely nyelvre, és megszabadítja Önt a JSON-fájlok fárasztó kezelésétől.

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

npm install tacotranslate

2. lépés: Hozzon 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 hozzá tartozó API-kulcsokat. Regisztrálj itt. Ingyenes, és nem kell hitelkártya-adatokat megadnod.

A TacoTranslate alkalmazás felületén hozz létre egy projektet, és navigálj az API-kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Elmentjük őket környezeti változókként. A read kulcs az, amit publicnak hívunk, a read/write kulcs pedig a secret. Például hozzáadhatod őket a projekt gyökerében található .env fájlhoz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Győződj meg róla, hogy a titkos read/write API-kulcsot soha ne hozd nyilvánosságra kliensoldali éles környezetekben.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) nyelvi kód. Ebben a példában az angolhoz a en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolva lesznek, például a webhelyed URL-je. További információ az originokról itt.

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

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

A TacoTranslate alkalmazásba történő integrálásához létre kell hoznod egy klienst a korábban megadott API-kulcsok felhasználásával. 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 definiáljuk a TACOTRANSLATE_API_KEY.

A kliens létrehozása 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 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, egészítse ki a definíciót a fenti tulajdonságokkal és kóddal.

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

TacoTranslate lehetővé teszi a fordítások szerveroldali renderelését. Ez jelentősen javítja a felhasználói élményt, mivel a lefordított tartalmat azonnal megjeleníti, ahelyett, hogy először nem lefordított tartalom villanna fel. Emellett kihagyhatjuk a kliensoldali hálózati kéréseket, mivel már rendelkezünk minden szükséges fordítással.

Kezdjük azzal, hogy létrehozzuk vagy módosítjuk a /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'),
	});
};

Állítsd be a isProduction ellenőrzést a környezetednek megfelelően. Ha true, a TacoTranslate előhozza a nyilvános API-kulcsot. Ha helyi, teszt vagy staging környezetben vagyunk (isProduction is false), akkor a titkos read/write API-kulcsot fogjuk használni, hogy az új sztringek biztosan fordításra kerüljenek.

Eddig csak a Next.js alkalmazást állítottuk be a 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ényeidtől függően használd a getTacoTranslateStaticProps vagy a getTacoTranslateServerSideProps.

Ezek a függvények három argumentumot várnak: egy Next.js Static Props Context objektumot, a TacoTranslate konfigurációját, és opcionális Next.js tulajdonságokat. Azt is megjegyzendő, hogy a getTacoTranslateStaticProps revalidate értéke alapértelmezés szerint 60, így a fordításaid naprakészek maradnak.

Ha bármelyik függvényt egy oldalon szeretnéd használni, tegyük fel, hogy van egy olyan oldalfájlod, mint 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!"/>;
}

Mostantól használhatod a Translate komponenst az összes React-komponensedben 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, amelyeknél az API-kulcsnak read/write jogosultsága van, lesznek képesek új, lefordítandó szövegeket létrehozni. Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol ilyen API-kulccsal tesztelheted az éles alkalmazásodat, és még élesítés előtt hozzáadhatod az új szövegeket. 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 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 minket, és szívesen segítünk.

A TacoTranslate lehetővé teszi, hogy React-alkalmazásaidat automatikusan, gyorsan lokalizáld több mint 75 nyelvre és onnan vissza. Kezdd el még ma!