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 a webfejlesztők számára, hogy olyan alkalmazásokat építsenek, amelyek különböző országokból és kultúrákból származó felhasználókat is kiszolgálnak. Ennek egyik kulcsfontosságú módja a nemzetköziesítés (i18n), amely lehetővé teszi, hogy az alkalmazásod különböző nyelvekhez, valutákhoz és dátumformátumokhoz igazodjon.

Ebben az útmutatóban megmutatjuk, hogyan adhatsz 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ó azon 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, tekintse meg helyette ezt az útmutatót.

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

A Next.js alkalmazásod internacionalizálásának megvalósításához 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 fogjuk használni.

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

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

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 hozzá tartozó API-kulcsokat. Hozz létre fiókot 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. Ezeket környezeti változókként mentjük el. A read kulcs az úgynevezett public, a read/write kulcs pedig a secret. Például hozzáadhatja őket a projekt gyökerében található .env fájlhoz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ügyelj arra, hogy a titkos read/write API-kulcsot soha ne szivárogtasd ki a kliensoldali éles környezetbe.

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

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

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

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

A TacoTranslate alkalmazásba való 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 /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;

Hamarosan automatikusan beállítjuk a TACOTRANSLATE_API_KEY-t.

A kliens külön fájlban történő létrehozása 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 vannak egyéni pageProps és _app.tsx, kérjük, egészítse ki a definíciót a fent megadott tulajdonságokkal és kóddal.

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

TacoTranslate támogatja a fordítások szerveroldali renderelését. Ez nagyban javítja a felhasználói élményt, mivel a lefordított tartalom azonnal megjelenik, ahelyett, hogy először egy lefordítatlan tartalom felvillanása történne. Emellett elhagyhatjuk a kliensoldali hálózati kéréseket, mert már megvannak 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 az isProduction ellenőrzést a saját 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 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 oldalad fordításait. Ehhez a következő igényeidtől függően vagy 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. Megjegyzés: revalidate a getTacoTranslateStaticProps esetén alapértelmezés szerint 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 oldalfájlod, 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!"/>;
}

Mostantól használhatja a Translate komponenst az összes React-komponensében 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 szöveget hozzáadsz egy Translate komponenshez. Megjegyzés: csak azok a környezetek, amelyeknél az API-kulcsnak read/write jogosultsága van, tudnak új, fordí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 új szövegeket adhatsz hozzá élesítés előtt. Ez megakadályozza, hogy bárki 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.

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!