Jak implementovat internacionalizaci v aplikaci Next.js, která používá Pages Router
Zpřístupněte svou React aplikaci širšímu publiku a oslovte nové trhy pomocí internacionalizace (i18n).
Jak se svět stává stále více globalizovaným, je pro webové vývojáře čím dál důležitější vytvářet aplikace, které dokážou 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 si ukážeme, jak přidat internacionalizaci do vaší React Next.js aplikace, včetně server-side renderingu. TL;DR: Kompletní příklad naleznete zde.
Tento průvodce je určen pro Next.js aplikace, 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
Abychom implementovali internacionalizaci ve vaší Next.js aplikaci, nejprve zvolíme knihovnu pro i18n. 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í nejmodernější AI a zbavuje vás únavné správy JSON souborů.
Nainstalujme jej 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 u TacoTranslate, překladový projekt a související API klíče. Založte si účet zde. Je to zdarma a nevyžaduje zadání platební karty.
V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na jeho kartu API keys. Vytvořte jeden read
klíč a jeden read/write
klíč. Uložíme je jako proměnné prostředí. read
klíč je to, čemu říká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 tajný read/write
API klíč se nikdy nedostane 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 záložní lokality. V tomto příkladu jej nastavíme naen
pro angličtinu.TACOTRANSLATE_ORIGIN
: „složka“, kam budou vaše řetězce uloženy, například URL vašeho webu. Přečtěte si více o originách zde.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Krok 3: Nastavení TacoTranslate
Pro integraci TacoTranslate s vaší aplikací budete muset vytvořit klienta pomocí dříve získaných API klíčů. Například vytvořte soubor nazvaný /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 automaticky nadefinujeme TACOTRANSLATE_API_KEY
.
Vytvoření klienta v samostatném souboru usnadní 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 už 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 vykreslování překladů na straně serveru. To výrazně zlepšuje uživatelský zážitek tím, že se přeložený obsah zobrazí okamžitě, místo aby se nejprve objevil záblesk nepřeloženého obsahu. Navíc můžeme na klientu 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.
Dosud jsme v aplikaci Next.js pouze nastavili seznam podporovaných jazyků. Dalším krokem bude získat překlady pro všechny vaše stránky. K tomu použijete buď getTacoTranslateStaticProps
nebo getTacoTranslateServerSideProps
podle vašich požadavků.
Tyto funkce přijímají tři argumenty: jeden objekt Next.js Static Props Context, konfiguraci pro TacoTranslate a volitelné vlastnosti Next.js. Všimněte si, že revalidate
u getTacoTranslateStaticProps
je ve výchozím nastavení 60, takže vaše překlady zůstanou aktuální.
Chcete-li kteroukoliv z funkcí použít na stránce, předpokládejme, že máte soubor stránky jako /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žít komponentu Translate
k překladu řetězců ve všech vašich React komponentách.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Krok 5: Nasadit a otestovat!
Hotovo! Vaše React aplikace se nyní bude automaticky překládat, 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
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 produkční aplikaci s takovým API klíčem a přidávat nové řetězce před jejím nasazením. Tímto zabráníte komukoli komukoli ukrást váš tajný API klíč a potenciálně nafouknout 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. Tam také najdete příklad, jak to udělat pomocí App Router! Pokud narazíte na nějaké problémy, neváhejte se ozvat, rádi vám pomůžeme.
TacoTranslate vám umožňuje automaticky lokalizovat vaše React aplikace rychle do a z více než 75 jazyků. Začněte ještě dnes!