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, egyre fontosabbá válik a webfejlesztők számára, hogy olyan alkalmazásokat hozzanak létre, 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ásod különböző nyelvekhez, valutákhoz és dátumformátumokhoz igazodjon.

Ebben az útmutatóban megvizsgáljuk, hogyan adhatsz internacionalizációt a React Next.js alkalmazásodhoz, szerver oldali rendereléssel. TL;DR: Teljes példát itt láthatod.

Ez az útmutató a Next.js alkalmazások számára készült, 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 ki kell választanunk egy i18n könyvtárat. Számos népszerű könyvtár létezik, például a next-intl. Azonban ebben a példában a TacoTranslate használatára fogunk törekedni.

A TacoTranslate korszerű AI technológiával automatikusan lefordítja a szövegeidet bármely nyelvre, és megszabadít a JSON fájlok fáradságos kezelésétől.

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

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 kapcsolódó API kulcsokat. Készíts fiókot itt. Ingyenes, és nem kell hozzá bankkártyát megadnod.

A TacoTranslate alkalmazás felhasználói 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 nevezzük public kulcsnak, míg a read/write kulcs a secret. Például hozzáadhatod őket a projekted gyökérkönyvtárában 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 szivárogtasd ki a kliens oldali éles környezetben.

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 angol nyelvhez.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a karakterláncok tárolva lesznek, például a webhelyed URL-címe. További információk az originökrő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 való integrálásához létre kell hoznod egy klienst a korábban megszerzett API kulcsok felhasználásával. Például hozz létre egy /tacotranslate-client.js nevű fájlt.

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 megadjuk.

A kliens létrehozása 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 egyéni pageProps és _app.tsx, kérjük, bővítse ki a definíciót a fenti tulajdonságokkal és kóddal.

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

A TacoTranslate támogatja a fordítások szerver oldali renderelését. Ez jelentősen javítja a felhasználói élményt azzal, hogy azonnal megjeleníti a lefordított tartalmat, ahelyett, hogy először egy le nem fordított tartalom villanása látszódna. Emellett kihagyhatjuk a hálózati kéréseket a kliensen, mert már rendelkezünk az összes szükséges fordítással.

Azzal fogjuk kezdeni, 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 beállításaidhoz igazítva. 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 új szövegek kerüljenek elküldésre fordításra.

Eddig csak a támogatott nyelvek listájával állítottuk be a Next.js alkalmazást. A következő lépésben lekérjük az összes oldal fordítását. Ehhez az igényeidnek megfelelően 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, és opcionális Next.js tulajdonságokat. Vegye figyelembe, hogy revalidate az getTacoTranslateStaticProps esetében alapértelmezés szerint 60-ra van állítva, így a fordításai naprakészek maradnak.

Ahhoz, hogy bármelyik függvényt használhassa egy oldalon, feltételezzük, hogy van egy oldal fá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 a Translate komponenst használd a karakterláncok fordítására az összes React komponenseden belül.

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 lefordításra kerül, amikor bármilyen sztringet hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek, amelyek rendelkeznek a read/write engedélyekkel az API kulcson, lesznek képesek új lefordítandó sztringeket létrehozni. Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat egy ilyen API kulccsal, és előtte adhatsz hozzá új sztringeket. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és potenciálisan felduzzassza a fordítási projektedet új, nem kapcsolódó sztringek hozzáadásával.

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

A TacoTranslate lehetővé teszi, hogy React alkalmazásaid több mint 75 nyelvre gyorsan és automatikusan lokalizáld. Kezdj bele még ma!