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

Ako sa svet stáva čoraz viac globalizovaným, je pre webových vývojárov čoraz dôležitejšie vytvárať aplikácie, ktoré môžu vyhovieť používateľom z rôznych krajín a kultúr. Jedným z kľúčových spôsobov, ako to dosiahnuť, je prostredníctvom internacionalizácie (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 renderovaním. TL;DR: Pozrite si tu celý príklad.

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

Krok 1: Nainštalujte si i18n knižnicu

Na implementáciu internacionalizácie vo vašej Next.js aplikácii si najskôr 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 najmodernejšej umelej inteligencie a zbavuje vás 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 TacoTranslate

Keď už máte modul nainštalovaný, je čas vytvoriť si účet TacoTranslate, prekladateľský projekt a priradené API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje to pridanie kreditnej karty.

V používateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na záložku jeho 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ľúč 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

Určite nikdy neprepúšťajte tajný read/write API kľúč do produkčného prostredia na strane klienta.

Pridáme tiež ešte dve environmentálne premenné: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený záložný kód 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 adresa vášho webu. Viac o pôvodoch si prečítate tu.

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

Krok 3: Nastavenie TacoTranslate

Na integráciu TacoTranslate do vašej aplikácie budete potrebovať vytvoriť klienta pomocou API kľúčov, ktoré ste si vytvorili skôr. 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, pomocou 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 serverového renderovania

TacoTranslate umožňuje serverové renderovanie vašich prekladov. To výrazne zlepšuje používateľský zážitok tým, že zobrazuje preložený obsah okamžite, namiesto toho, aby sa najprv zobrazil záblesk nepreloženého obsahu. Navyše môžeme preskočiť sieťové požiadavky na klientovi, 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šou vecou, ktorú urobíme, je 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, aby boli vaše preklady aktuálne.

Na použitie ktorejkoľvek funkcie na 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 v rámci všetkých vašich React komponentov.

import {Translate} from 'tacotranslate/react';

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

Krok 5: Nasadiť a otestovať!

Sme hotoví! Vaša React aplikácia bude teraz automaticky prekladaná, keď pridáte akékoľvek reťazce do komponentu Translate. Upozorňujeme, ž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é stagingové prostredie, kde môžete otestovať svoju produkčnú aplikáciu s takýmto API kľúčom, pridávajúc nové reťazce pred spustením do prevádzky. Týmto zabráni niekomu ukradnúť váš tajný API kľúč a potenciálne nafúknuť váš prekladový projekt pridaním nových, nesúvisiacich reťazcov.

Nezabudnite si pozrieť úplný príklad na našom profile GitHub. Tam nájdete 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 než 75 jazykov. Začnite ešte dnes!