Ako implementovať internacionalizáciu v aplikácii Next.js, ktorá používa Pages Router

Ako sa svet stáva viac globalizovaným, je čoraz dôležitejšie, aby weboví vývojári vytvárali aplikácie, ktoré dokážu uspokojiť používateľov z rôznych krajín a kultúr. Jedným z kľúčových spôsobov, ako to dosiahnuť, je internacionalizácia (i18n), ktorá vám umožňuje prispôsobiť vašu aplikáciu rôznym jazykom, menám a formátom dátumu.

V tomto návode preskúmame, ako pridať internacionalizáciu do vašej React Next.js aplikácie so serverovým vykresľovaním. TL;DR: Pozrite si úplný príklad tu.

Tento návod je určený pre Next.js aplikácie, ktoré používajú Pages Router.
Ak používate App Router, pozrite si namiesto toho tento návod.

Krok 1: Nainštalujte knižnicu i18n

Na implementáciu internacionalizácie vo vašej Next.js aplikácii si najprv vyberieme knižnicu i18n. Existuje niekoľko populárnych knižníc, vrátane next-intl. Avšak v tomto príklade budeme používať TacoTranslate.

TacoTranslate automaticky prekladá vaše reťazce do akéhokoľvek jazyka pomocou špičkovej umelej inteligencie a oslobodí vás od zdĺhavej správy JSON súborov.

Nainštalujme ho pomocou npm vo vašom termináli:

npm install tacotranslate

Krok 2: Vytvorte si bezplatný účet v službe TacoTranslate

Teraz, keď máte modul nainštalovaný, je čas vytvoriť si účet v TacoTranslate, prekladový projekt a príslušné API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje pridanie kreditnej karty.

V používateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na jeho záložku API kľúčov. Vytvorte jeden read kľúč a jeden read/write kľúč. Uložíme ich ako premenné prostredia. read kľúč nazývame public, a read/write kľúč nazývame secret. Napríklad ich môžete pridať do súboru .env v koreňovom adresári vášho projektu.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Uistite sa, že nikdy neprezradíte tajný read/write API kľúč v produkčnom prostredí na strane klienta.

Pridáme tiež ďalšie dve premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód záložného jazyka. V tomto príklade ho nastavíme na en pre angličtinu.
• TACOTRANSLATE_ORIGIN: „zložka“, kde budú uložené vaše reťazce, napríklad URL vašej webovej stránky. Prečítajte si viac o originách tu.

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

Krok 3: Nastavenie TacoTranslate

Aby ste integrovali TacoTranslate do svojej aplikácie, budete musieť vytvoriť klienta pomocou API kľúčov z predchádzajúcej časti. Napríklad vytvorte súbor s názvom /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;

Čoskoro automaticky definujeme TACOTRANSLATE_API_KEY.

Vytvorenie klienta v samostatnom súbore uľahčuje jeho opätovné použitie neskôr. Teraz, pri použití vlastného /pages/_app.tsx, pridáme poskytovateľa TacoTranslate.

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>
	);
}

Ak už máte vlastné pageProps a _app.tsx, rozšírte definíciu o vlastnosti a kód uvedené vyššie.

Krok 4: Implementácia renderovania na strane servera

TacoTranslate umožňuje vykresľovanie prekladov na strane servera. To výrazne zlepšuje používateľský zážitok tým, že zobrazuje preložený obsah okamžite, namiesto toho, aby sa najprv objavil krátky záblesk nepreloženého obsahu. Okrem toho môžeme na strane klienta vynechať sieťové požiadavky, pretože už máme všetky potrebné preklady.

Začneme vytvorením alebo úpravou /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'),
	});
};

Upravte kontrolu isProduction tak, aby vyhovovala vášmu nastaveniu. Ak je true, TacoTranslate zobrazí verejný API kľúč. Ak sme v lokálnom, testovacom alebo staging prostredí (isProduction is false), použijeme tajný read/write API kľúč, aby sa zabezpečilo odoslanie nových reťazcov na preklad.

Doteraz sme v aplikácii Next.js nastavili iba zoznam podporovaných jazykov. Ďalším krokom bude načítanie prekladov pre všetky vaše stránky. Na to použijete buď getTacoTranslateStaticProps alebo getTacoTranslateServerSideProps podľa vašich požiadaviek.

Tieto funkcie prijímajú tri argumenty: jeden objekt Next.js Static Props Context, konfiguráciu pre TacoTranslate a voliteľné vlastnosti Next.js. Všimnite si, že revalidate na getTacoTranslateStaticProps je predvolene nastavené na 60, takže vaše preklady zostanú aktuálne.

Ak chcete použiť ktorúkoľvek z týchto funkcií v stránke, predpokladajme, že máte súbor stránky ako /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!"/>;
}

Teraz by ste mali byť schopní použiť komponent Translate na preklad reťazcov vo všetkých vašich React komponentoch.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Krok 5: Nasadiť a otestovať!

Hotovo! Vaša React aplikácia sa teraz bude automaticky prekladať, keď pridáte akékoľvek reťazce do komponentu Translate. Majte na pamäti, že iba prostredia s povoleniami read/write na API kľúči budú môcť vytvárať nové reťazce na preklad. Odporúčame mať uzavreté a zabezpečené staging prostredie, kde môžete otestovať svoju produkčnú aplikáciu s takýmto API kľúčom a pridávať nové reťazce pred nasadením. Tým zabránite tomu, aby niekto niekto ukradol váš tajný API kľúč a potenciálne tým nežiaduco zväčšil váš prekladový projekt pridaním nových, nesúvisiacich reťazcov.

Nezabudnite si pozrieť kompletný príklad na našom profile na GitHube. Tam nájdete aj príklad, ako to urobiť pomocou App Router! Ak narazíte na nejaké problémy, neváhajte nás kontaktovať, veľmi radi vám pomôžeme.

TacoTranslate vám umožňuje rýchlo a automaticky lokalizovať vaše aplikácie v Reacte do a z viac ako 75 jazykov. Začnite ešte dnes!