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

Ako sa svet stáva viac globalizovaný, je pre webových vývojárov čoraz dôležitejšie vytvárať aplikácie, ktoré dokáž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átumov.

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

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

Krok 1: Nainštalujte i18n knižnicu

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. V tomto príklade však budeme používať TacoTranslate.

TacoTranslate automaticky prekladá vaše reťazce do ľubovoľného jazyka pomocou najmodernejšej AI a zbavuje vás zdĺhavého spravovania JSON súborov.

Nainštalujme ho pomocou npm vo vašom 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 príslušné API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje to 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ľúč 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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód náhradnej lokalizácie. 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 pôvodoch tu.

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

Krok 3: Nastavenie TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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;

Klátoto budeme automaticky definovať TACOTRANSLATE_API_KEY čoskoro.

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ú skúsenosť tým, že okamžite zobrazuje preložený obsah, namiesto toho, aby sa najprv zobrazil nedopatrením nepreložený obsah. Okrem toho môžeme na klientovi preskočiť sieťové požiadavky, pretože už máme všetky potrebné preklady.

Začneme vytvorením alebo úpravou súboru /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 true, TacoTranslate zobrazí verejný kľúč API. Ak sa nachádzame v lokálnom, testovacom alebo prípravnom prostredí (isProduction is false), použijeme tajný kľúč rozhrania API read/write , aby sme sa uistili, že nové reťazce sa odosielajú na preklad.

Doteraz sme nastavovali aplikáciu Next.js iba so zoznamom podporovaných jazykov. Ďalšia vec, ktorú urobíme, je načítanie prekladov pre všetky vaše stránky. Na tento účel použijete buď getTacoTranslateStaticProps , alebo getTacoTranslateServerSideProps podľa vašich požiadaviek.

Tieto funkcie majú tri argumenty: Jeden Next.js Static Props Context objekt, konfiguráciu pre TacoTranslate a voliteľné Next.js vlastnosti. Upozorňujeme, že revalidate na getTacoTranslateStaticProps je predvolene nastavená na 60, aby vaše preklady zostali aktuálne.

Ak chcete použiť niektorú z funkcií na stránke, predpokladajme, že máte stránkový súbor 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žívať 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ť!

Sme hotoví! Vaša React aplikácia bude teraz automaticky prekladaná, keď pridáte akékoľvek reťazce do Translate komponentu. Všimnite si, že iba prostredia s read/write oprávneniami 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 testovať vašu produkčnú aplikáciu s takýmto API kľúčom a pridávať nové reťazce pred spustením do prevádzky. Týmto zabránite komukoľvek ukradnúť váš tajný API kľúč a potenciálne nafúknuť váš prekladový projekt pridaním nových, nesúvisiacich reťazcov.

Nezabudnite si pozrieť kompletný príklad na našom GitHub profile. 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 rýchlo a automaticky lokalizovať vaše React aplikácie do a z akéhokoľvek jazyka. Začnite ešte dnes!