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

Ako sa svet stáva čoraz globalizovanejším, je pre webových vývojárov čoraz dôležitejšie vytvárať aplikácie, ktoré dokážu osloviť 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 aplikácie React Next.js s renderovaním na strane servera. TL;DR: Pozrite si celý 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

Aby sme v svojej Next.js aplikácii implementovali internacionalizáciu, najskôr si vyberieme i18n knižnicu. Existuje niekoľko populárnych knižníc, vrátane next-intl. V tomto príklade však budeme používať TacoTranslate.

TacoTranslate automaticky prekladá vaše reťazce do akéhokoľvek jazyka pomocou špičkovej umelej inteligencie a zbavuje vás zdĺhavého spravovania súborov JSON.

Nainštalujme ho pomocou npm v termináli:

npm install tacotranslate

Krok 2: Vytvorte si bezplatný účet TacoTranslate

Teraz, keď máte modul nainštalovaný, je čas vytvoriť si účet TacoTranslate, prekladateľský projekt a súvisiace API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje zadanie kreditnej karty.

V používateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na kartu API kľúčov. Vytvorte jeden read kľúč a jeden read/write kľúč. Uložíme ich ako premenné prostredia. read kľúč je to, čomu hovoríme public a read/write kľúč je 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

Dávajte pozor, aby ste tajný read/write API kľúč nikdy nezverejnili v produkčných prostrediach na strane klienta.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód náhradnej lokality. 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. Viac o originách sa dozviete tu.

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

Krok 3: Nastavenie TacoTranslate

Aby ste integrovali TacoTranslate do svojej aplikácie, budete potrebovať vytvoriť klienta pomocou API kľúčov z predchádzajúceho kroku. 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 ďalšie použitie. 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, prosím, rozšírte definíciu o vlastnosti a kód uvedené vyššie.

Krok 4: Implementácia renderovania na strane servera

TacoTranslate umožňuje vykonávať renderovanie prekladov na strane servera. To výrazne zlepšuje používateľský zážitok tým, že okamžite zobrazuje preložený obsah namiesto záblesku nepreloženého obsahu. Okrem toho môžeme na klientskej strane 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 podľa vášho nastavenia. Ak true, TacoTranslate zobrazí verejný API kľúč. Ak sa nachádzame v lokálnom, testovacom alebo staging prostredí (isProduction is false), použijeme tajný read/write API kľúč, aby sa zabezpečilo, že nové reťazce budú odoslané 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 Next.js Static Props Context objekt, 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 zostávajú aktuálne.

Ak chcete použiť ktorúkoľvek z týchto funkcií na stránke, predpokladajme, že máte súbor stránky, napríklad /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 bude teraz automaticky preložená, keď pridáte akékoľvek reťazce do komponentu Translate. Všimnite si, že iba prostredia s oprávneniami read/write pre daný API kľúč budú môcť vytvárať nové reťazce na preklad. Odporúčame mať uzavreté a zabezpečené staging prostredie, kde môžete testovať vašu produkčnú aplikáciu s takýmto API kľúčom a pridávať nové reťazce pred nasadením do produkcie. Týmto zabránite komukoľvek ukradnúť váš tajný API kľúč a prípadne nafúknuť váš prekladový projekt pridaním nových, nesúvisiacich reťazcov.

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

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