Hogyan valósítsuk meg a nemzetközivé tételt egy Next.js alkalmazásban, amely a Pages Router-t használja

Ahogy a világ egyre globalizáltabbá válik, egyre fontosabbá válik a webfejlesztők számára, hogy olyan alkalmazásokat építsenek, amelyek képesek megfelelni a különböző országokból és kultúrákból származó felhasználók igényeinek. Ennek egyik kulcsfontosságú módja az internacionalizáció (i18n), amely lehetővé teszi, hogy alkalmazásodat különböző nyelvekhez, pénznemekhez és dátumformátumokhoz igazítsd.

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

Ez az útmutató olyan Next.js alkalmazásokhoz készült, amelyek a Pages Router-t használják.
Ha a App Router-t használod, kérlek, nézd meg inkább ezt az útmutatót.

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

A nemzetköziesítés megvalósításához a Next.js alkalmazásodban először ki kell választanunk egy i18n könyvtárat. Több népszerű könyvtár is létezik, például a next-intl. Azonban ebben a példában a TacoTranslate könyvtárat fogjuk használni.

A TacoTranslate a legkorszerűbb mesterséges intelligencia használatával automatikusan lefordítja a szövegeidet bármely nyelvre, így megszabadít a JSON fájlok unalmas kezelésétől.

Telepítsük a 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 hitelkártyát megadnod.

A TacoTranslate-alkalmazás 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ókként fogjuk elmenteni. A read kulcsot nevezzük public kulcsnak, míg a read/write kulcs a secret. Például hozzáadhatod őket egy .env fájlhoz a projekt gyökérkönyvtárában.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Győződj meg róla, hogy soha ne szivárogjon ki a titkos read/write API-kulcs 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 visszaesési helyi kód. Ebben a példában ezt en-re állítjuk, azaz angolra.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolva lesznek, például a weboldalad URL-je. Itt olvashatsz többet az originokról.

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 kapott 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 következőképpen fogjuk automatikusan definiálni a TACOTRANSLATE_API_KEY-t.

Az ügyfél létrehozása egy 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 egyedi pageProps és _app.tsx, kérjük, bővítse ki a definíciót a fent említett tulajdonságokkal és kóddal.

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

A TacoTranslate lehetővé teszi a fordítások szerveroldali renderelését. Ez jelentősen javítja a felhasználói élményt azáltal, hogy a lefordított tartalmat azonnal megjeleníti, ahelyett, hogy először egy fel nem fordított tartalom villanását látnánk. Emellett kihagyhatjuk a hálózati kéréseket a kliens oldalon, mert már rendelkezésünkre állnak az összes szükséges fordítás.

Az /next.config.js fájl létrehozásával vagy módosításával kezdünk.

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 a nyilvános API kulcsot jeleníti meg. Ha helyi, teszt vagy staging környezetben vagyunk (isProduction is false), a titkos read/write API kulcsot fogjuk használni, hogy biztosítsuk az új szövegek fordításra küldését.

Eddig csak a Next.js alkalmazást állítottuk be a támogatott nyelvek listájával. A következő lépés, hogy lekérjük az összes oldalad fordítását. Ehhez a szükségleteid alapján vagy a getTacoTranslateStaticProps, vagy a getTacoTranslateServerSideProps függvényt fogod használni.

Ezek a függvények három argumentumot vesznek fel: egy Next.js Static Props Context objektumot, a TacoTranslate konfigurációját, és opcionális Next.js tulajdonságokat. Vegye figyelembe, hogy a getTacoTranslateStaticProps revalidate alapértelmezett értéke 60, hogy fordításai naprakészek maradjanak.

Ahhoz, hogy bármelyik függvényt használja egy oldalon, tegyük fel, hogy van egy olyan oldal fájlja, 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!"/>;
}

Most már képesnek kell lennie arra, hogy használja a Translate komponenst az összes React komponensében található szövegek lefordításához.

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 sztringet hozzáadsz egy Translate komponenshez. Fontos megjegyezni, hogy csak azok a környezetek, amelyek rendelkeznek az API kulcs read/write jogosultságaival, képesek új fordítandó sztringeket létrehozni. Ajánlott egy zárt és biztonságos staging környezetet fenntartani, ahol az éles alkalmazásodat ilyen API kulccsal tesztelheted, új sztringek hozzáadásával még a bevezetés előtt. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és esetleges felesleges, nem kapcsolódó sztringekkel ne növekedjen jelentősen a fordítási projekted mérete.

Ne felejtsd el megnézni a teljes példát a GitHub profilunkon. Ott találsz egy példát arra is, hogyan lehet ezt megvalósítani a App Router használatával! Ha bármilyen problémába ütköznél, bátran lépj kapcsolatba velünk, és örömmel segítünk.

A TacoTranslate lehetővé teszi, hogy React alkalmazásaidat gyorsan és automatikusan lokalizáld bármely nyelvre és onnan. Kezdd el még ma!