Jak implementovat internacionalizaci v aplikaci Next.js, která používá App Router

Jak se svět stále více globalizuje, je pro webové vývojáře čím dál důležitější vytvářet aplikace, které dokážou oslovit uživatele z různých zemí a kultur. Jedním z klíčových způsobů, jak toho dosáhnout, je internacionalizace (i18n), která vám umožňuje přizpůsobit aplikaci různým jazykům, měnám a formátům dat.

V tomto článku si ukážeme, jak přidat internacionalizaci do vaší React Next.js aplikace s vykreslováním na straně serveru. TL;DR: Zde najdete kompletní příklad.

Tento průvodce je určen pro Next.js aplikace, které používají App Router.
Pokud používáte Pages Router, podívejte se místo toho na tento průvodce.

Krok 1: Nainstalujte knihovnu i18n

Pro implementaci internacionalizace ve vaší Next.js aplikaci nejprve zvolíme i18n knihovnu. Existuje několik populárních knihoven, včetně next-intl. V tomto příkladu však budeme používat TacoTranslate.

TacoTranslate automaticky překládá vaše řetězce do libovolného jazyka pomocí špičkové AI a zbaví vás únavné správy JSON souborů.

Nainstalujme ji pomocí npm v terminálu:

npm install tacotranslate

Krok 2: Vytvořte si bezplatný účet TacoTranslate

Nyní, když máte modul nainstalovaný, je čas vytvořit svůj účet TacoTranslate, překladatelský projekt a příslušné API klíče. Založte si účet zde. Je to zdarma a nevyžaduje zadání kreditní karty.

V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na kartu API klíčů. Vytvořte jeden read klíč a jeden read/write klíč. Uložíme je jako proměnné prostředí. read klíč nazýváme public a read/write klíč nazýváme secret. Například je můžete přidat do souboru .env v kořenovém adresáři vašeho projektu.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Dbejte na to, abyste nikdy nevyzradili tajný read/write API klíč do produkčního prostředí na straně klienta.

Přidáme také dvě další proměnné prostředí: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód náhradní lokalizace (fallback). V tomto příkladu jej nastavíme na en pro angličtinu.
• TACOTRANSLATE_ORIGIN: „složka“, kde budou uloženy vaše řetězce, například URL vašeho webu. Přečtěte si více o origins zde.

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

Krok 3: Nastavení TacoTranslate

Chcete-li integrovat TacoTranslate do vaší aplikace, budete muset vytvořit klienta pomocí dříve uvedených API klíčů. Například vytvořte soubor s názvem /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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Brzy automaticky definujeme TACOTRANSLATE_API_KEY a TACOTRANSLATE_PROJECT_LOCALE.

Vytvoření klienta v samostatném souboru usnadňuje jeho opětovné použití později. getLocales je jen pomocná funkce s vestavěným zpracováním chyb. Nyní vytvořte soubor s názvem /app/[locale]/tacotranslate.tsx, kde implementujeme poskytovatele TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Všimněte si 'use client';, což označuje, že se jedná o klientskou komponentu.

Jakmile je poskytovatel kontextu připraven, vytvořte soubor pojmenovaný /app/[locale]/layout.tsx, který je kořenovým rozvržením v naší aplikaci. Všimněte si, že tato cesta obsahuje složku využívající Dynamic Routes, kde [locale] je dynamický parametr.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

První věc, kterou je třeba zde poznamenat, je, že používáme náš parametr Dynamic Route [locale] k načítání překladů pro daný jazyk. Dále generateStaticParams zajišťuje, že všechny kódy lokalit, které máte ve svém projektu aktivované, jsou předrenderovány.

Nyní vytvořme naši první stránku! Vytvořte soubor s názvem /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Všimněte si proměnné revalidate, která říká Next.js, aby stránku po 60 sekundách znovu sestavil a udržel vaše překlady aktuální.

Krok 4: Implementace vykreslování na straně serveru

TacoTranslate podporuje vykreslování na straně serveru. To výrazně zlepšuje uživatelský zážitek tím, že zobrazuje přeložený obsah okamžitě, místo aby se nejprve objevil záblesk nepřeloženého obsahu. Navíc můžeme vynechat síťové požadavky na straně klienta, protože už máme překlady, které potřebujeme pro stránku, kterou uživatel právě prohlíží.

Chcete-li nastavit vykreslování na straně serveru, vytvořte nebo upravte /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Upravte kontrolu isProduction podle vašeho nastavení. Pokud je true, TacoTranslate zobrazí veřejný API klíč. Pokud jsme v lokálním, testovacím nebo staging prostředí (isProduction is false), použijeme tajný API klíč read/write, aby se nové řetězce odesílaly k překladu.

Aby směrování a přesměrování fungovalo podle očekávání, budeme muset vytvořit soubor s názvem /middleware.ts. Pomocí Middleware můžeme uživatele přesměrovat na stránky zobrazené v jejich preferovaném jazyce.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Ujistěte se, že nastavíte matcher v souladu s dokumentací Next.js Middleware.

Na straně klienta můžete upravit cookie locale tak, aby změnila preferovaný jazyk uživatele. Podívejte se na kompletní ukázkový kód pro inspiraci, jak to provést!

Krok 5: Nasadit a otestovat!

Hotovo! Vaše React aplikace bude nyní automaticky překládána, když do komponenty Translate přidáte libovolné řetězce. Všimněte si, že pouze prostředí s oprávněními read/write na API klíči budou schopna vytvářet nové řetězce k překladu. Doporučujeme mít uzavřené a zabezpečené stagingové prostředí, kde můžete otestovat svou produkční aplikaci s takovým API klíčem a přidávat nové řetězce před nasazením do provozu. Tím zabráníte komukoli komukoli ukrást váš tajný API klíč a potenciálně nadměrně nafouknout váš překladový projekt přidáváním nových, nesouvisejících řetězců.

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 Pages 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!