Kuidas rakendada rahvusvahelistamist Next.js rakenduses, mis kasutab App Router-it
Tee oma Reacti rakendus kättesaadavamaks ja jõua rahvusvaheliste turgudeni rahvusvahelise toetusega (i18n).
Kui maailm muutub üha globaliseeritumaks, on veebiarendajatel järjest olulisem luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on internatsionaliseerimine (i18n), mis võimaldab teil kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.
Selles artiklis uurime, kuidas lisada internatsionaliseerimist teie React Next.js rakendusse koos serveripoolse renderdamisega. TL;DR: Vaadake siit täielikku näidet.
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
Rahvusvahelisuse rakendamiseks oma Next.js rakenduses valime esmalt i18n teegi. On mitu populaarset teeki, sealhulgas next-intl. Selles näites kasutame aga TacoTranslate.
TacoTranslate tõlgib sinu tekstid automaatselt ükskõik millisesse keelde, kasutades tipptasemel tehisintellekti ning vabastab sind JSON-failide tüütust haldamisest.
Paigaldame selle kasutades npm 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 ning ei nõua krediitkaardi lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu 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 secret
. Näiteks võid need lisada oma projekti juurkausta faili .env
.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veenduge, et te ei lekita kunagi saladuslikku read/write
API võtit kliendipoolsetesse tootmiskeskkondadesse.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi varukohtkeele kood. Selles näites määrame selle väärtuseksen
, mis tähistab inglise keelt.TACOTRANSLATE_ORIGIN
: „Kaust“, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit lisaks päritolude kohta.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. samm: TacoTranslate seadistamine
TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt saadud 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 automaatselt peagi ära TACOTRANSLATE_API_KEY
ja TACOTRANSLATE_PROJECT_LOCALE
.
Kliendi loomine eraldi failis teeb selle hilisema taaskasutamise lihtsaks. getLocales
on lihtsalt kasutusfunktsioon, millel on mõned sisseehitatud veahaldusfunktsioonid. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx
, kus me rakendame TacoTranslate
pakkujat.
'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>
);
}
Pane tähele 'use client';
, mis näitab, et tegemist on kliendikomponendiga.
Kui 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 siinkohal märkida, on see, et me kasutame oma Dynamic Route
parameetrit [locale]
selle keele tõlgete toomiseks. Lisaks tagab generateStaticParams
, et kõik teie projekti jaoks aktiveeritud lokaliseerimiskoodid on eelrenderdatud.
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 pärast ja hoiab teie tõlked ajakohasena.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate toetab serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, näidates koheselt tõlgitud sisu, selle asemel et esmalt kuvada lühikest ettekäändeks olevat mittetõlgitud sisu. Lisaks saame kliendipoolsed võrgupäringud vahele jätta, sest meil on juba olemas tõlked, mida vajame kasutaja vaatava lehe jaoks.
Serveripoolse renderdamise seadistamiseks loo või muuda faili /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};
};
Muuda isProduction
kontroll vastavalt oma seadistusele. Kui true
, kuvab TacoTranslate avaliku API võtme. Kui oleme lokaalses, test- või staging-keskkonnas (isProduction
is false
), kasutame salajast read/write
API võtit, et tagada uute stringide saatmine tõlkimiseks.
Selleks, et marsruutimine ja ümbersuunamine toimiksid ootuspäraselt, peame looma faili nimega /middleware.ts
. Kasutades Middleware, saame kasutajad suunata nende eelistatud keeles esitletud lehtedele.
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. Lisateavet ja näidiskoodi leiate täielikust näitekoodist!
Samm 5: Väljalaskmine ja testimine!
Oleme valmis! Teie React-rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate
komponendile. Pange tähele, et ainult keskkonnad, millel on API võtmel read/write
õigused, saavad luua uusi tõlgitavaid stringe. Soovitame teil omada suletud ja turvalist testkeskkonda, kus saate oma tootmisrakendust sellise API võtmega testida, lisades enne avaldamist uusi stringe. See takistab kellelgi teie salajase API võtme varastamist ning võimaliku teie tõlkeprojekti ülekoormamise uusate, mitteseotud stringidega.
Kindlasti vaadake täielikku näidet meie GitHubi profiilil. Seal leiate ka näite, kuidas seda teha, kasutades Pages Router-it! Kui teil tekib probleeme, võtke julgelt meiega ühendust – me aitame teid hea meelega.
TacoTranslate võimaldab teil automaatselt lokaliseerida oma Reacti rakendusi kiiresti kõigisse keeltesse ja neist väljapoole. Alustage juba täna!