Najlepšie riešenie pre internacionalizáciu (i18n) v aplikáciách Next.js

Ako to funguje

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 cez internacionalizáciu (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 server-side renderingom. 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, pozrite si prosím radšej 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 i18n knižnicu. Existuje niekoľko populárnych knižníc, vrátane next-intl. V tomto príklade však použijeme TacoTranslate.

TacoTranslate automaticky prekladá vaše reťazce do akéhokoľvek jazyka pomocou najmodernejšej umelej inteligencie a ušetrí vás od 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 na TacoTranslate

Keď máte modul nainštalovaný, je čas vytvoriť si účet na 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 uží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 environmentálne premenné. 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ľúč pre produkčné prostredia 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 locale. 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 origins si prečítajte tu.

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

Krok 3: Nastavenie TacoTranslate

Na integráciu TacoTranslate s vašou aplikáciou 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 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 server-side renderovania

TacoTranslate umožňuje serverové renderovanie vašich prekladov. To značne zlepšuje užívateľský zážitok tým, že sa okamžite zobrazí preložený obsah, namiesto toho, aby sa najprv objavil záblesk nepreloženého obsahu. Okrem toho môžeme vynechať sieťové požiadavky na strane klienta, 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 nastavili Next.js aplikáciu len so zoznamom podporovaných jazykov. Ďalšia vec, 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 hodnota revalidate v getTacoTranslateStaticProps je predvolene nastavená na 60, aby boli vaše preklady vždy aktuálne.

Ak chcete použiť ktorúkoľvek funkciu 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ží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ť!

Máme hotovo! Vaša Next.js aplikácia bude teraz automaticky prekladaná, keď pridáte akékoľvek reťazce do komponentu Translate. Upozorňujeme, že vytvárať nové reťazce na preklad budú môcť iba prostredia s oprávneniami read/write na API kľúči. Odporúčame mať uzavreté a zabezpečené stagingové prostredie, kde môžete testovať svoju produkčnú aplikáciu s takýmto API kľúčom a pridávať nové reťazce pred nasadením do výroby. Týmto zabránite tomu, aby niekto ukradol váš tajný API kľúč a potenciálne nafúkol váš prekladateľský projekt pridaním nových, nesúvisiacich reťazcov.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!