Ako implementovať internacionalizáciu v Next.js aplikácii, ktorá používa Pages Router
Zvýšte dostupnosť svojej React aplikácie a oslovte nové trhy pomocou internacionalizácie (i18n).
Ako sa svet stáva čoraz globalizovanejším, je pre webových vývojárov čoraz dôležitejšie vytvárať aplikácie, ktoré dokážu osloviť používateľov z rôznych krajín a kultúr. Jedným z kľúčových spôsobov, ako to dosiahnuť, je internacionalizácia (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 aplikácie React Next.js s renderovaním na strane servera. TL;DR: Pozrite si celý príklad tu.
Tento návod je určený pre Next.js aplikácie, ktoré používajú Pages Router.
Ak používate App Router, pozrite si namiesto toho tento návod.
Krok 1: Nainštalujte knižnicu i18n
Aby sme v svojej Next.js aplikácii implementovali internacionalizáciu, najskôr si vyberieme i18n knižnicu. 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 akéhokoľvek jazyka pomocou špičkovej umelej inteligencie a zbavuje vás zdĺhavého spravovania súborov JSON.
Nainštalujme ho pomocou npm v 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 súvisiace API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje 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ľúč je to, čomu hovoríme 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
Dávajte pozor, aby ste tajný read/write
API kľúč nikdy nezverejnili v produkčných prostrediach na strane klienta.
Pridáme tiež dve ďalšie premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE
a TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Predvolený kód náhradnej lokality. V tomto príklade ho nastavíme naen
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 originách sa dozviete tu.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Krok 3: Nastavenie TacoTranslate
Aby ste integrovali TacoTranslate do svojej aplikácie, 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 ďalšie použitie. Teraz, pri použití 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 renderovania na strane servera
TacoTranslate umožňuje vykonávať renderovanie prekladov na strane servera. To výrazne zlepšuje používateľský zážitok tým, že okamžite zobrazuje preložený obsah namiesto záblesku nepreloženého obsahu. Okrem toho môžeme na klientskej strane vynechať sieťové požiadavky, pretože už máme všetky potrebné preklady.
Začneme vytvorením alebo ú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
podľa vášho nastavenia. Ak true
, TacoTranslate zobrazí verejný API kľúč. Ak sa nachádzame v lokálnom, testovacom alebo staging prostredí (isProduction
is false
), použijeme tajný read/write
API kľúč, aby sa zabezpečilo, že nové reťazce budú odoslané na preklad.
Doteraz sme v aplikácii Next.js nastavili iba zoznam podporovaných jazykov. Ďalším krokom bude 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 Next.js Static Props Context objekt, konfiguráciu pre TacoTranslate a voliteľné vlastnosti Next.js. Všimnite si, že revalidate
na getTacoTranslateStaticProps
je predvolene nastavené na 60, takže vaše preklady zostávajú aktuálne.
Ak chcete použiť ktorúkoľvek z týchto funkcií na stránke, predpokladajme, že máte súbor stránky, napríklad /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žiť 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ť!
Hotovo! Vaša React aplikácia bude teraz automaticky preložená, keď pridáte akékoľvek reťazce do komponentu Translate
. Všimnite si, že iba prostredia s oprávneniami read/write
pre daný API kľúč 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 nasadením do produkcie. Týmto zabránite komukoľvek ukradnúť váš tajný API kľúč a prípadne nafúknuť váš prekladový projekt pridaním nových, nesúvisiacich reťazcov.
Nezabudnite si pozrieť kompletný príklad na našom profile na GitHub. Nájdete tam 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 automaticky lokalizovať vaše React aplikácie rýchlo do a z viac ako 75 jazykov. Začnite ešte dnes!