Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab App Router-it
Tee oma Reacti rakendus paremini ligipääsetavaks ja jõua rahvusvahelisel tasandil uute turgudeni rahvusvahelistamise (i18n) abil.
Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi võimalusi seda saavutada on rahvusvahelistamine (i18n), mis võimaldab teil kohandada oma rakendust erinevate keelte, valuutade ja kuupäevavormingute jaoks.
Selles artiklis uurime, kuidas lisada rahvusvahelistamine sinu React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaata täielikku näidet siit.
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
Rahvusvahelistamise rakendamiseks oma Next.js rakenduses valime kõigepealt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Selles näites kasutame aga TacoTranslate.
TacoTranslate tõlgib teie stringid automaatselt mis tahes keelde, kasutades tipptasemel tehisintellekti, ning vabastab teid JSON-failide tüüpilisest haldamisest.
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 sinu pangakaardi andmete lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja navigeeri selle API-võtmete vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. read
võtit kutsume public
ja read/write
võtit secret
. Näiteks võid need lisada oma projekti juurkataloogis olevasse .env
faili.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veenduge, et te ei lekita kunagi salajast read/write
API-võtit kliendipoolsetesse tootmiskeskkondadesse.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi tagasilangemise keelekood. Selles näites määrame selle väärtuseksen
, mis tähistab inglise keelt.TACOTRANSLATE_ORIGIN
: “Kaust”, kuhu sinu tekstilõigud salvestatakse, näiteks sinu veebisaidi URL. Loe siit rohkem originate kohta.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Samm 3: TacoTranslate seadistamine
TacoTranslate 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 TACOTRANSLATE_API_KEY
ja TACOTRANSLATE_PROJECT_LOCALE
peagi.
Kliendi loomine eraldi failis teeb selle hilisemalt uuesti kasutamise lihtsaks. getLocales
on lihtsalt utiliitfunktsioon mõne sisseehitatud veakäsitlusega. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx
, kus me rakendame TacoTranslate
pakkuja.
'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 kliendi komponendiga.
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!" />
);
}
Pööra tähelepanu revalidate
muutujale, mis käsib Next.js-il lehekülg 60 sekundi järel uuesti üles ehitada ning hoida sinu tõlked ajakohasena.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate toetab serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, kuvades kohe tõlgitud sisu, mitte esmalt mittetõlgitud sisu vilksatust. Lisaks saame kliendipoolseid võrgu päringuid vahele jätta, sest meil on juba olemas tõlked selle lehe jaoks, mida kasutaja vaatab.
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.
Et tagada marsruutimise ja ümber suunamise ootuspärane toimimine, peame looma faili nimega /middleware.ts
. Kasutades Middleware, saame suunata kasutajad 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 vahetada kasutaja eelistatud keelt. Palun vaadake täielikku näitekoodi, et saada ideid, kuidas seda teha!
5. samm: Paigalda ja testi!
Oleme valmis! Sinu Reacti rakendus tõlgitakse nüüd automaatselt, kui lisad mis tahes stringe Translate
komponendile. Pane tähele, et ainult keskkonnad, millel on API-võtme read/write
õigused, saavad luua uusi tõlgitavaid stringe. Soovitame sul olla sulgenud ja turvaline staging-keskkond, kus saad testida oma tootmisrakendust sellise API-võtmega, lisades uusi stringe enne live’i minekut. See takistab kellelgi sinu salajase API-võtme varastamist ning potentsiaalselt tõlgendusprojekti paisutamist uute, seotud stringideta stringidega.
Ole kindel, et vaadates meie täielikku näidet meie GitHubi profiilil. Seal leiad ka näite, kuidas seda teha kasutades Pages Router! Kui sul tekib mingeid probleeme, võta julgelt ühendust, ja me aitame sind hea meelega.
TacoTranslate võimaldab sul automaatselt lokaliseerida oma Reacti rakendusi kiiresti igasse keelde ja tagasi. Alusta juba täna!