Kuidas rakendada rahvusvahelistamist Next.js rakenduses, mis kasutab App Router-it
Muuda oma Reacti rakendus kättesaadavamaks ja jõua rahvusvaheliste turgudeni rahvusvahelistamise (i18n) abil.
Kuna maailm muutub järjest globaliseeritumaks, on veebiarendajatel üha olulisem luua rakendusi, mis suudavad sobituda erinevate riikide ja kultuuridega kasutajatega. Üks peamisi viise selle saavutamiseks on rahvusvahelistumine (i18n), mis võimaldab kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.
Selles artiklis uurime, kuidas lisada rahvusvahelistumine teie React Next.js rakendusse koos serveripoolse renderdamisega. TL;DR: Vaata täisnäidet siin.
See juhend on mõeldud Next.js rakendustele, mis kasutavad App Router.
Kui kasutate Pages Router, vaadake selle asemel seda juhendit.
Samm 1: Paigalda i18n teek
Et oma Next.js rakenduses rahvusvahelistumist rakendada, valime esmalt i18n raamistiku. On mitmeid populaarseid raamistikke, sh next-intl. Selles näites kasutame siiski TacoTranslate.
TacoTranslate tõlgib sinu stringid automaatselt ükskõik millisesse keelde, kasutades tipptasemel tehisintellekti, ning vabastab sind tüüpilise JSON-failide halduse tüütusest.
Paigaldame selle npm abil oma terminalis:
npm install tacotranslate
Samm 2: Loo tasuta TacoTranslate konto
Nüüd, kui sul on moodul paigaldatud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API võtmed. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja navigeeri selle API keys
vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. read
võtit nimetame public
, ja read/write
võtit nimetame secret
. Näiteks võid need lisada oma projekti juurkausta faili .env
.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veendu, et saladus read/write
API võti ei lekiks kunagi kliendi poole tootmiskeskkondades.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi tagasipöördumise locale-kood. Selles näites määrame selle väärtuseksen
ehk inglise keele jaoks.TACOTRANSLATE_ORIGIN
: „Kaust“, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit lähemalt originaalidest.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. samm: TacoTranslate seadistamine
TacoTranslate integreerimiseks oma rakendusse peate looma kliendi, kasutades varem mainitud API-võtmeid. Näiteks looge fail nimega /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;
Me määrame varsti automaatselt TACOTRANSLATE_API_KEY
ja TACOTRANSLATE_PROJECT_LOCALE
.
Klienti eraldi faili loomine teeb selle hiljem lihtsasti taaskasutatavaks. getLocales
on lihtsalt abifunktsioon mõne sisseehitatud veakäsitlusega. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx
, kuhu me implementeerime TacoTranslate
provideri.
'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>
);
}
Pöörake tähelepanu 'use client';
, mis näitab, et tegemist on kliendikomponendiga.
Konteksti pakkuja on nüüd valmis, loo fail nimega /app/[locale]/layout.tsx
, mis on meie rakenduse juurpaigutus. Pange tähele, et selles teekonnas on kaust, mis kasutab Dynamic Routes, kus [locale]
on dünaamiline parameeter.
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>
);
}
Esimene asi, mida siin märgata, on see, et me kasutame oma Dynamic Route
parameetrit [locale]
selle keele tõlgete toomiseks. Lisaks tagab generateStaticParams
, et kõik teie projektis aktiveeritud lokaadikoodid on eeltoodetud.
Nüüd, ehitame oma esimese lehe! Loo fail nimega /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!" />
);
}
Pange tähele revalidate
muutujat, mis ütleb Next.js-ile, et leht ehitatakse uuesti 60 sekundi järel ja hoiab teie tõlked ajakohasena.
4. samm: Serveripoolse renderdamise rakendamine
TacoTranslate toetab serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, kuvades kohe tõlgitud sisu, selle asemel et esmalt näidata lühidat tõlkimata sisu. Lisaks saame kliendis vahele jätta võrgupäringud, kuna meil on juba olemas tõlked, mida sellel kasutaja vaadatud lehel vaja on.
Serveripoolse renderdamise seadistamiseks loo või muuda /next.config.js
faili:
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};
};
Muuda isProduction
kontrolli vastavalt oma seadistusele. Kui true
, kuvab TacoTranslate avaliku API võtme. Kui me oleme lokaalses, test- või staging-keskkonnas (isProduction
is false
), kasutame salajast read/write
API võtit, et uued stringid saadetaks tõlkimiseks.
Selleks, et marsruutimine ja ümber suunamine toimiksid ootuspäraselt, peame looma faili nimega /middleware.ts
. Kasutades Middleware, saame kasutajad suunata lehtedele, mis on esitatud nende eelistatud keeles.
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);
}
Veendu, et seadistad matcher
vastavalt Next.js Middleware dokumentatsioonile.
Kliendi poolel saate muuta locale
küpsist, et muuta kasutaja eelistatud keelt. Palun vaadake täielikku näidiskoodi, et saada ideid, kuidas seda teha!
Samm 5: Rakenda ja testi!
Oleme valmis! Teie React rakendus tõlgitakse nüüd automaatselt, kui lisate mingeid stringe Translate
komponendile. Pange tähele, et ainult keskkonnad, millel on read/write
õigused API võtmel, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame kasutada suletud ja turvalist staging-keskkonda, kus saate oma tootmisrakendust testida sellise API võtmega, lisades uusi stringe enne reaalajale minekut. See aitab takistada kellegi saladusliku API võtme varastamist ning vähendada riski, et teie tõlkeprojekt paisub, lisades uusi, mitteseotud stringe.
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!