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

Jak se svět stává více globalizovaným, je pro webové vývojáře stále důležitější vytvářet aplikace, které mohou vyhovět uživatelům 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 vaši aplikaci různým jazykům, měnám a formátům dat.

V tomto tutoriálu prozkoumáme, jak přidat internacionalizaci do vaší React Next.js aplikace se server-side renderingem. TL;DR: Podívejte se zde na kompletní příklad.

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

Krok 1: Nainstalujte knihovnu i18n

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

TacoTranslate automaticky překládá vaše řetězce do jakéhokoli jazyka pomocí nejmodernější AI a zbavuje vás náročné správy JSON souborů.

Nainstalujme ji pomocí npm ve vašem terminálu:

npm install tacotranslate

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

Nyní, když máte modul nainstalovaný, je čas vytvořit si účet v TacoTranslate, překladatelský projekt a k němu přidružené API klíče. Vytvořte si účet zde. Je to zdarma a nevyžaduje to zadání kreditní karty.

V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na jeho záložku 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íč je 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

Ujistěte se, že nikdy neprozradíte tajný read/write API klíč do produkčního prostředí na straně klienta.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód náhradního jazyka. V tomto příkladu ho nastavíme na en pro angličtinu.
• TACOTRANSLATE_ORIGIN: „složka“, kde budou vaše řetězce uloženy, například URL vaší webové stránky. Více o origins zde.

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

Krok 3: Nastavení 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;

Brzy budeme automaticky definovat TACOTRANSLATE_API_KEY.

Vytvoření klienta v samostatném souboru usnadňuje jeho opětovné použití později. Nyní pomocí vlastního /pages/_app.tsx přidáme poskytovatele 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>
	);
}

Pokud již máte vlastní pageProps a _app.tsx, rozšiřte prosím definici o vlastnosti a kód uvedený výše.

Krok 4: Implementace server-side renderování

TacoTranslate umožňuje serverové vykreslení vašich překladů. To výrazně zlepšuje uživatelský zážitek tím, že okamžitě zobrazí přeložený obsah, místo aby se nejprve zobrazil krátký záblesk nepřeloženého obsahu. Navíc můžeme na klientovi vynechat síťové požadavky, protože už máme všechny potřebné překlady.

Začneme vytvořením nebo ú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 vašemu nastavení. Pokud true, TacoTranslate zobrazí veřejný klíč API. Pokud se nacházíme v místním, testovacím nebo přípravném prostředí (isProduction is false), použijeme tajný klíč rozhraní API read/write , abychom zajistili, že budou nové řetězce odeslány k překladu.

Až dosud jsme aplikaci Next.js nastavovali pouze se seznamem podporovaných jazyků. Další věc, kterou uděláme, je načíst překlady pro všechny vaše stránky. K tomu použijete buď getTacoTranslateStaticProps , nebo getTacoTranslateServerSideProps na základě vašich požadavků.

Tyto funkce mají tři argumenty: jeden Next.js Static Props Context objekt, konfiguraci pro TacoTranslate a volitelné vlastnosti Next.js. Všimněte si, že revalidate na getTacoTranslateStaticProps je ve výchozím nastavení nastaveno na 60, aby vaše překlady zůstaly aktuální.

Chcete-li na stránce použít kteroukoli funkci, předpokládejme, že máte stránkovací soubor, jako je /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!"/>;
}

Nyní byste měli být schopni používat komponentu Translate k překladu textů ve všech svých React komponentách.

import {Translate} from 'tacotranslate/react';

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

Krok 5: Nasazení a testování!

Jsme hotovi! Vaše React aplikace bude nyní automaticky překládána, když přidáte jakékoliv řetězce do komponenty Translate. Vezměte na vědomí, že pouze prostředí s oprávněními read/write k API klíči budou schopna vytvářet nové řetězce k překladu. Doporučujeme mít uzavřené a zabezpečené testovací prostředí, kde můžete otestovat vaši produkční aplikaci s takovým API klíčem a přidávat nové řetězce před jejím uvedením do provozu. Tím zabráníte tomu, aby někdo ukradl váš tajný API klíč a potenciálně nafoukl váš překladový projekt přidáváním nových, nesouvisejících řetězců.

Nezapomeňte si prohlédnout kompletní příklad na našem GitHub profilu. Najdete tam také příklad, jak to udělat pomocí App Router! Pokud narazíte na jakékoliv problémy, neváhejte nás kontaktovat, rádi vám pomůžeme.

TacoTranslate vám umožní rychle a automaticky lokalizovat vaše React aplikace do a z jakéhokoliv jazyka. Začněte ještě dnes!