A legjobb megoldás a Next.js-alkalmazások nemzetközivé tételéhez (i18n)

Hogyan működik

Ahogy a világ egyre globalizálódik, egyre fontosabbá válik, 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ók igényeit is kielégítik. Az egyik kulcsfontosságú módja ennek a nemzetközivé tétel (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 megvizsgáljuk, hogyan adhatod hozzá a nemzetközivé tételt a 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 Routert használják.
Ha a App Routert használja, kérjük, tekintse meg helyette ezt az útmutatót.

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

A Next.js alkalmazásod nemzetközivé (i18n) tétele érdekében 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-t fogjuk használni.

A TacoTranslate a legkorszerűbb mesterséges intelligencia segítségével automatikusan lefordítja a szövegeidet bármely nyelvre, és megszabadít a JSON-fájlok fárasztó kezelgetésétől.

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

npm install tacotranslate

2. lépés: Hozz 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 kapcsolódó API-kulcsokat. Regisztrálj itt. Ingyenes, és nem kell bankkártyát megadnod.

A TacoTranslate alkalmazás felületén hozzon létre egy projektet, majd navigáljon az API-kulcsok fülére. Hozzon 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 kulcsnak, a read/write kulcs pedig secret. Például hozzáadhatja őket egy .env fájlhoz a projekt gyökérkönyvtárában.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ügyelj rá, hogy soha ne szivárogtasd ki a titkos read/write API-kulcsot az ügyféloldali é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 fallback locale kódja. Ebben a példában az angolhoz en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: A „mappa”, ahová a stringjeid lesznek tárolva, például a webhelyed URL-je. Itt olvashatsz bővebben az originokról.

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

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

A TacoTranslate integrálásához az alkalmazásába létre kell hoznia egy klienst a korábban kapott API-kulcsok felhasználásával. Például hozzon 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;

Hamarosan automatikusan definiáljuk a TACOTRANSLATE_API_KEY.

Külön fájlban létrehozni a klienst megkönnyíti a későbbi újrafelhasználást. Most egy egyedi /pages/_app.tsx használatával hozzáadjuk a TacoTranslate providert.

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 egyedi pageProps és _app.tsx fájlokkal rendelkezel, kérjük, egészítsd ki a definíciót a fenti tulajdonságokkal és kóddal.

4. lépés: A szerveroldali 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, mivel a lefordított tartalmat azonnal megjeleníti, ahelyett, hogy először egy nem lefordított tartalom villanása történne. Ezenfelül kihagyhatjuk a kliensoldali hálózati kéréseket, mert már rendelkezünk minden szükséges fordítással.

Kezdjük azzal, hogy létrehozzuk vagy módosítjuk /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 az isProduction ellenőrzést a saját beállításaidnak megfelelően. Ha true, a TacoTranslate megjeleníti a publikus API-kulcsot. Ha helyi, teszt- vagy staging környezetben vagyunk (isProduction is false), a titkos read/write API-kulcsot fogjuk használni, hogy biztosan elküldjük az új stringeket 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ésben az összes oldalhoz lekérjük a fordításokat. Ehhez a követelményeidnek megfelelően a következők egyikét fogod használni: getTacoTranslateStaticProps vagy getTacoTranslateServerSideProps.

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. Megjegyzés: revalidate a getTacoTranslateStaticProps esetében alapértelmezetten 60-ra van állítva, í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 ilyen oldalfájlod: /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 is vagyunk! A Next.js alkalmazásod mostantól automatikusan le lesz fordítva, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Vedd figyelembe, hogy csak azok a környezetek tudnak új, lefordítandó szövegeket létrehozni, amelyeknél az API-kulcs rendelkezik read/write jogosultsággal. Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol egy ilyen API-kulccsal tesztelheted az éles alkalmazásodat, és előtte 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övegekkel.

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!