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álják. Ennek egyik kulcsfontosságú módja a nemzetköziesítés (i18n), amely lehetővé teszi, hogy az alkalmazásodat különböző nyelvekre, pénznemekre és dátumformátumokra igazítsd.

Ebben a bemutatóban megvizsgáljuk, hogyan adhatunk nemzetköziesítést a React Next.js alkalmazásodhoz 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'),
	});
};

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

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.

Mindenképp nézd meg a teljes példát a GitHub-profilunkon. Ott találhatsz egy példát arra is, hogyan lehet ezt megtenni a App Router használatával! Ha bármilyen problémába ütközöl, nyugodtan keress minket, és örömmel segítünk.

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