A legjobb megoldás a nemzetközivé tételhez (i18n) Next.js-alkalmazásokban

Hogyan működik

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

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

Ez az útmutató azoknak a Next.js alkalmazásoknak szól, amelyek a Pages Router használatával működnek.
Ha a App Router-t használja, kérjük, tekintse meg helyette ezt az útmutatót.

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

Az i18n megvalósításához a Next.js alkalmazásodban 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. Ebben a példában azonban a TacoTranslate szolgáltatást fogjuk használni.

TacoTranslate a legkorszerűbb mesterséges intelligencia segítségével automatikusan lefordítja a szövegeidet bármely nyelvre, és megszabadít az időigényes JSON fájlok kezelésétől.

Telepítsük a terminálodban npm használatával:

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. Hozz létre fiókot itt. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd lépj 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 kulcsot nevezzük public-nak, a read/write kulcsot pedig secret-nek. 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

Győződj meg róla, hogy a titkos read/write API-kulcs soha ne kerüljön ki kliensoldali éles környezetekbe.

Ezen felül még két környezeti változót is hozzáadunk: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) locale kódja. Ebben a példában az en-t angolként állítjuk be.
• TACOTRANSLATE_ORIGIN: Az a “mappa”, ahol a szövegeid lesznek tárolva, például a webhelyed URL-je. Erről az eredetekről bővebben itt olvashatsz.

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

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

A TacoTranslate alkalmazásodba történő integrálásához létre kell hoznod egy klienst a korábban említett 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 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, 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 fordított tartalom azonnal megjelenik, ahelyett, hogy először egy nem lefordított tartalom villanjon fel. Emellett a kliensoldalon megspórolhatjuk a hálózati kéréseket, mert már rendelkezésünkre állnak a szükséges fordítások.

Kezdjük azzal, hogy létrehozunk vagy módosítunk /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, hogy megfeleljen a beállításaidnak. 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 sztringek biztosan el legyenek küldve 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ényeinek megfelelően vagy a getTacoTranslateStaticProps, vagy a getTacoTranslateServerSideProps függvényt kell használnia.

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. Vegyük figyelembe, hogy a getTacoTranslateStaticProps esetén a revalidate alapértelmezés szerint 60-ra van állítva, így a fordítások naprakészek maradnak.

Bármelyik függvényt is használod egy oldalon, tegyük fel, hogy van egy olyan oldalfájlod, mint /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 fordí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 Next.js alkalmazásod mostantól automatikusan le lesz fordítva, amikor bármilyen stringet hozzáadsz egy Translate komponenshez. Felhívjuk a figyelmedet, hogy csak azok a környezetek lesznek képesek új, fordítandó stringek létrehozására, amelyek API-kulcsán read/write jogosultságok vannak. Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol ilyen API-kulccsal tesztelheted az éles alkalmazásodat, és élőbe kerülés előtt hozzáadhatod az új stringeket. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és hogy a fordítási projektedet új, nem kapcsolódó stringek hozzáadásával felduzzassák.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!