Kako implementirati internacionalizacijo v Next.js aplikaciji, ki uporablja App Router
Naredite svojo React aplikacijo bolj dostopno in dosezite nove trge z internacionalizacijo (i18n).
Ker se svet globalizira, je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko zadovoljujejo uporabnike iz različnih držav in kultur. Eden ključnih načinov za dosego tega je internacionalizacija (i18n), ki vam omogoča, da prilagodite svojo aplikacijo različnim jezikom, valutam in oblikam datuma.
V tem članku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji, skupaj s strežniškim upodabljanjem. TL;DR: Oglejte si celoten primer tukaj.
Ta vodič je namenjen aplikacijam Next.js, ki uporabljajo App Router.
Če uporabljate Pages Router, si oglejte ta vodič.
Korak 1: Namestite i18n knjižnico
Za uvedbo internacionalizacije v vaši Next.js aplikaciji bomo najprej izbrali i18n knjižnico. Obstaja več priljubljenih knjižnic, vključno z next-intl. V tem primeru pa bomo uporabili TacoTranslate.
TacoTranslate samodejno prevede vaše nize v kateri koli jezik z uporabo najnovejše umetne inteligence in vas osvobodi dolgotrajnega upravljanja JSON datotek.
Namestimo ga preko npm v vašem terminalu:
npm install tacotranslate
2. korak: Ustvarite brezplačen račun TacoTranslate
Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj račun TacoTranslate, prevajalski projekt in pripadajoče API ključe. Ustvarite račun tukaj. Je brezplačno in ne zahteva vnosa kreditne kartice.
V uporabniškem vmesniku aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek z API ključi. Ustvarite en read
ključ in en read/write
ključ. Shranili jih bomo kot spremenljivke okolja. read
ključ imenujemo public
in read/write
ključ je secret
. Na primer, lahko jih dodate v datoteko .env
v korenu vašega projekta.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Poskrbite, da skrivnega ključa API read/write
nikoli ne razkrijete v produkcijskih okoljih na strani odjemalca.
Dodali bomo še dve okoljski spremenljivki: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta koda jezika za rezervno možnost. V tem primeru jo bomo nastavili naen
za angleščino.TACOTRANSLATE_ORIGIN
: »Mapa«, kjer bodo shranjene vaše nizi, na primer URL vaše spletne strani. Preberite več o izvorih tukaj.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Korak 3: Nastavitev TacoTranslate
Za integracijo TacoTranslate z vašo aplikacijo boste morali ustvariti klienta z uporabo API ključev, omenjenih prej. Na primer, ustvarite datoteko z imenom /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;
Kmalu bomo samodejno definirali TACOTRANSLATE_API_KEY
in TACOTRANSLATE_PROJECT_LOCALE
.
Ustvarjanje klienta v ločeni datoteki omogoča enostavno ponovno uporabo kasneje. getLocales
je le pomožna funkcija z vgrajenim upravljanjem napak. Zdaj ustvarite datoteko z imenom /app/[locale]/tacotranslate.tsx
, kjer bomo implementirali ponudnika 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>
);
}
Upoštevajte 'use client';
, kar pomeni, da je to klientna komponenta.
Ko je kontekstni ponudnik pripravljen za uporabo, ustvarite datoteko z imenom /app/[locale]/layout.tsx
, glavno postavitev v naši aplikaciji. Upoštevajte, da ta pot vsebuje mapo, ki uporablja Dynamic Routes, kjer je [locale]
dinamični parameter.
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>
);
}
Prva stvar, ki jo je treba tukaj opozoriti, je, da uporabljamo naš Dynamic Route
parameter [locale]
za pridobivanje prevodov za ta jezik. Poleg tega generateStaticParams
zagotavlja, da so vsi jezikovni kodi, ki ste jih aktivirali za vaš projekt, vnaprej upodobljeni.
Zdaj pa zgradimo našo prvo stran! Ustvarite datoteko z imenom /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!" />
);
}
Upoštevajte spremenljivko revalidate
, ki Next.js sporoča, naj po 60 sekundah znova zgradi stran in ohrani vaše prevode posodobljene.
4. korak: Implementacija upodabljanja na strežniški strani
TacoTranslate podpira upodabljanje na strežniški strani. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino namesto začetnega utripa neprevedene vsebine. Poleg tega lahko na strani odjemalca preskočimo omrežne zahteve, ker že imamo prevode, potrebne za stran, ki jo uporabnik trenutno gleda.
Za nastavitev upodabljanja na strežniški strani ustvarite ali spremenite /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};
};
Spremenite preverjanje isProduction
tako, da ustreza vaši nastavitvi. Če true
, bo TacoTranslate prikazal javni ključ API. Če smo v lokalnem, preskusnem ali pripravljalnem okolju (isProduction
is false
), bomo uporabili skrivni ključ API read/write
, da zagotovimo, da so novi nizi poslani v prevod.
Da zagotovimo pravilno delovanje usmerjanja in preusmerjanja, bomo morali ustvariti datoteko z imenom /middleware.ts
. Z uporabo Middleware lahko uporabnike preusmerimo na strani, prikazane v njihovem izbranem jeziku.
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);
}
Prepričajte se, da nastavite matcher
v skladu z dokumentacijo Next.js Middleware.
Na strani odjemalca lahko spremenite piškotek locale
, da nastavite uporabnikov prednostni jezik. Za ideje, kako to storiti, si oglejte popolno primer kodo!
Korak 5: Namestite in preizkusite!
Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko dodate katerikoli niz v komponento Translate
. Upoštevajte, da bodo lahko le okolja z dovoljenji read/write
za API ključ ustvarjala nove nize za prevajanje. Priporočamo, da imate zaprto in varno preskusno okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo s takim API ključem ter dodajate nove nize pred zagonom v živo. To bo preprečilo, da bi kdorkoli ukradel vaš skrivni API ključ in potencialno napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.
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!