Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab App Router
Muuda oma Reacti rakendus hõlpsamini ligipääsetavaks ja laienda oma turgu rahvusvahelistumise (i18n) abil.
Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistumine (i18n), mis võimaldab kohandada teie rakendust erinevatesse keeltesse, valuutadesse ja kuupäevavormingutesse.
Selles artiklis uurime, kuidas lisada rahvusvahelistumine teie React Next.js rakendusse serveripoolse renderdamisega. TL;DR: Vaadake täielikku nä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
Rahvusvahelisuse (i18n) rakendamiseks oma Next.js rakenduses valime esmalt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Seekord kasutame aga TacoTranslate.
TacoTranslate tõlgib sinu tekstid automaatselt igasse keelde, kasutades tipptasemel tehisintellekti, ja vabastab sind JSON-failide tüütust haldamisest.
Paigaldame selle oma terminalis, kasutades npm:
npm install tacotranslate
2. samm: 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 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 nimetame secret
. Näiteks võid need lisada projekti juurkataloogis olevale .env
failile.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veendu, et saladus read/write
API võti kunagi kliendi poolel tootmiskeskkonda ei lekiks.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi tagasilangemise lokaali kood. Selles näites määrame selle väärtuseksen
inglise keele jaoks.TACOTRANSLATE_ORIGIN
: “Kaust”, kus teie stringid talletatakse, näiteks teie veebisaidi URL. Loe siit originaalide kohta lähemalt.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. samm: 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 peagi TACOTRANSLATE_API_KEY
ja TACOTRANSLATE_PROJECT_LOCALE
.
Kliendi loomine eraldi failis teeb selle hiljem lihtsasti uuesti kasutatavaks. getLocales
on lihtsalt abifunktsioon mõne sisseehitatud veakäsitlusega. Nüüd loo fail nimega /app/[locale]/tacotranslate.tsx
, kus me rakendame 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>
);
}
Pange tähele 'use client';
, mis näitab, et tegu 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 siin tähele panna, 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 keelerekoodid on eelkuvatud.
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 käsib Next.js-il lehte 60 sekundi järel uuesti ehitada ning hoida teie tõlked ajakohasena.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate toetab serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, näidates tõlgitud sisu koheselt, selle asemel et esmalt kuvada tõlkimata sisu vilkuvat välgatust. Lisaks saame kliendipoolseid võrgupäringuid vahele jätta, kuna meil on juba olemas lehe jaoks vajalikud tõlked, mida kasutaja vaatab.
Serveripoolse renderdamise seadistamiseks loo või muuda /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
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.
Et tagada, et marsruutimine ja suunamine toimivad ootuspäraselt, peame looma faili nimega /middleware.ts
. Kasutades Middleware, saame suunata kasutajad lehtedele 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.
Kliendipoolselt saate muuta locale
küpsist, et muuta kasutaja eelistatud keelt. Palun vaadake täielikku näitekoodi, kust leiate ideid, kuidas seda teha!
Samm 5: Versiooni panna ja testida!
Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringi Translate
komponendile. Pange tähele, et ainult keskkonnad, millel on read/write
luba API-võtmele, saavad luua uusi tõlgitavaid stringe. Soovitame teil olla suletud ja turvaline testkeskkond, kus saate oma tootmisrakendust sellise API-võtmega testida ning enne avalikustamist uusi stringe lisada. See takistab kellegi salad API-võtme varastamist ja võimaliku tõlkeprojekti paisutamise uute, mitteseotud stringide lisamisega.
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!