Kako implementirati internacionalizacijo v Next.js aplikaciji, ki uporablja App Router
Naredite svojo React aplikacijo bolj dostopno in pridobite nove trge z internacionalizacijo (i18n).
S svetom, ki postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje, da gradijo aplikacije, ki lahko zadovoljijo 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 datumskim formatom.
V tem članku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z upoštevanjem strežniškega upodabljanja. TL;DR: Oglejte si celoten primer tukaj.
Ta vodič je namenjen Next.js aplikacijam, ki uporabljajo App Router.
Če uporabljate Pages Router, si oglejte raje ta vodič.
Korak 1: Namestite knjižnico i18n
Za implementacijo 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 najsodobnejše umetne inteligence in vas osvobodi zamudnega upravljanja JSON datotek.
Namestimo ga z uporabo npm v vašem terminalu:
npm install tacotranslate
Korak 2: Ustvarite brezplačen račun TacoTranslate
Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj TacoTranslate račun, prevajalski projekt in povezane API ključe. Ustvarite račun tukaj. Brezplačno je 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 ju bomo kot okoljske spremenljivke. read
ključ imenujemo public
, medtem ko je read/write
ključ secret
. Na primer, lahko ju dodate v datoteko .env
v korenski mapi vašega projekta.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Poskrbite, da skrivni ključ API-ja read/write
nikoli ne bo razkrit v produkcijskih okoljih na strani odjemalca.
Dodali bomo še dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta rezervna koda jezika. V tem primeru jo bomo nastavili naen
za angleščino.TACOTRANSLATE_ORIGIN
: "Mapa", kjer bodo shranjene vaše nize, 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
Da integrirate TacoTranslate v svojo aplikacijo, boste morali ustvariti odjemalca z uporabo zgoraj navedenih API ključev. 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 odjemalca v ločeni datoteki olajša njegovo ponovno uporabo pozneje. getLocales
je le pomožna funkcija z vgrajenim ravnanjem z napakami. Zdaj ustvarite datoteko z imenom /app/[locale]/tacotranslate.tsx
, v kateri 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>
);
}
Opazite 'use client';
, kar pomeni, da je to komponenta na odjemalski strani.
Ko je context provider pripravljen, ustvarite datoteko z imenom /app/[locale]/layout.tsx
, ki predstavlja osnovno 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 omeniti, je, da uporabljamo naš Dynamic Route
parameter [locale]
za pridobivanje prevodov za ta jezik. Poleg tega generateStaticParams
zagotavlja, da so vsi lokalni kodi, ki ste jih aktivirali za vaš projekt, predhodno upodobljeni.
Zdaj pa ustvarimo 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!" />
);
}
Opazite spremenljivko revalidate
, ki Next.js pove, naj znova zgradi stran po 60 sekundah in tako ohrani vaše prevode posodobljene.
Korak 4: Implementacija upodabljanja na strežniški strani
TacoTranslate podpira upodabljanje na strani strežnika. To zelo izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto da bi se najprej prikazal trenutek neprevedene vsebine. Poleg tega lahko na odjemalcu preskočimo mrežne zahteve, ker že imamo prevode, ki jih potrebujemo za stran, ki jo uporabnik trenutno gleda.
Za nastavitev upodabljanja na strani strežnika 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, da usmerjanje in preusmeritev delujeta, kot je pričakovano, bomo morali ustvariti datoteko z imenom /middleware.ts
. Z uporabo Middleware lahko preusmerimo uporabnike na strani, prikazane v njihovi izbrani jezikovni različici.
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);
}
Poskrbite, da boste matcher
nastavili v skladu z dokumentacijo Next.js Middleware.
Na odjemalcu lahko spremenite piškotek locale
, da zamenjate uporabnikov izbrani jezik. Za ideje, kako to narediti, si oglejte celoten primer kode!
Korak 5: Objavi in testiraj!
Končali smo! Vaša React aplikacija bo zdaj samodejno prevedena, ko dodate kakršnekoli nize v komponento Translate
. Upoštevajte, da bodo lahko samo okolja z dovoljenji read/write
za API ključ ustvarjala nove nize za prevajanje. Priporočamo, da imate zaprto in varno staging okolje, kjer lahko preizkusite vašo produkcijsko aplikacijo z API ključem takšnega tipa, ter dodajate nove nize pred objavo. S tem boste preprečili, da bi kdorkoli ukradel vaš skrivni API ključ in morebiti 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!