Kaip įgyvendinti internacionalizaciją Next.js programoje, naudojančioje App Router
Padarykite savo React programą prieinamesnę ir pasiekite naujas rinkas su tarptautinimu (i18n).
Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau, kad interneto kūrėjai kurtų programas, kurios galėtų atitikti vartotojų iš įvairių šalių ir kultūrų poreikius. Vienas iš pagrindinių būdų tai pasiekti yra internacionalizacija (i18n), leidžianti pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.
Šiame straipsnyje aptarsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės atvaizdavimą. TL;DR: Pilną pavyzdį žiūrėkite čia.
Šis vadovas skirtas Next.js programoms, kurios naudoja App Router.
Jei naudojate Pages Router, vietoj to žr. šį vadovą.
1 žingsnis: Įdiekite i18n biblioteką
Norėdami įgyvendinti internacionalizaciją savo Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra kelios populiarios bibliotekos, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.
TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą, naudodama pažangiausias AI technologijas, ir atlaisvina jus nuo varginančio JSON failų tvarkymo.
Įdiekime tai naudodami npm savo terminale:
npm install tacotranslate
2 žingsnis: Susikurkite nemokamą TacoTranslate paskyrą
Dabar, kai modulis įdiegtas, pats laikas susikurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja kreditinės kortelės.
TacoTranslate programos sąsajoje sukurkite projektą ir eikite į jo API raktų skirtuką. Sukurkite vieną read
raktą ir vieną read/write
raktą. Išsaugosime juos kaip aplinkos kintamuosius. read
raktas yra tai, ką vadiname public
, o read/write
raktas yra secret
. Pavyzdžiui, juos galite pridėti į .env
failą savo projekto šaknyje.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Būkite tikri, kad niekada neišleisite slaptų read/write
API rakto klientui skirtose gamybos aplinkose.
Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE
ir TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Numatytoji atsarginė lokalės santrumpa. Šiame pavyzdyje ją nustatysime kaipen
– anglų kalbai.TACOTRANSLATE_ORIGIN
: „Katalogas“, kuriame bus saugomos jūsų tekstų eilutės, pavyzdžiui, jūsų svetainės URL. Skaitykite daugiau apie originus čia.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3 žingsnis: TacoTranslate nustatymas
Norėdami integruoti TacoTranslate su savo programėle, turėsite sukurti klientą naudodami ankstesnius API raktus. Pavyzdžiui, sukurkite failą pavadinimu /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;
Netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY
ir TACOTRANSLATE_PROJECT_LOCALE
.
Kliento kūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. getLocales
yra tik pagalbinė funkcija su įmontuota klaidų tvarka. Dabar sukurkite failą pavadinimu /app/[locale]/tacotranslate.tsx
, kuriame įdiegsime TacoTranslate
tiekėją.
'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>
);
}
Atkreipkite dėmesį į 'use client';
, nurodantį, kad tai yra kliento komponentas.
Kadangi konteksto tiekėjas jau paruoštas, sukurkite failą pavadinimu /app/[locale]/layout.tsx
, kuris yra pagrindinis mūsų programos išdėstymas. Atkreipkite dėmesį, kad šiame kelyje yra aplankas, naudodamas Dynamic Routes, kur [locale]
yra dinaminis parametras.
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>
);
}
Pirmas dalykas, į kurį verta atkreipti dėmesį, yra tai, kad naudojame savo Dynamic Route
parametrą [locale]
tam, kad gautume to kalbos vertimus. Be to, generateStaticParams
užtikrina, kad visi lokalės kodai, kuriuos aktyvavote savo projekte, būtų iš anksto sugeneruoti.
Dabar sukurkime mūsų pirmąjį puslapį! Sukurkite failą pavadinimu /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!" />
);
}
Atkreipkite dėmesį į revalidate
kintamąjį, kuris nurodo Next.js perstatyti puslapį po 60 sekundžių ir laikyti jūsų vertimus atnaujintus.
4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas
TacoTranslate palaiko serverio pusės atvaizdavimą. Tai žymiai pagerina vartotojo patirtį, nes iš karto rodomas išverstinis turinys, užuot pirmiausia pasirodžius trumpam neužverstam turiniui. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime reikalingus vertimus tam puslapiui, kurį vartotojas žiūri.
Norėdami sukonfigūruoti serverio pusės renderinimą, sukurkite arba pakeiskite /next.config.js
failą:
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};
};
Pakeiskite isProduction
patikrinimą, kad jis atitiktų jūsų sąranką. Jei true
, "TacoTranslate" pateiks viešąjį API raktą. Jei esame vietinėje, bandomojoje ar sustojimo aplinkoje (isProduction
is false
), naudosime slaptą read/write
API raktą, kad įsitikintume, jog naujos eilutės siunčiamos vertimui.
Norėdami užtikrinti, kad maršrutizavimas ir peradresavimas veiktų kaip numatyta, turėsime sukurti failą pavadinimu /middleware.ts
. Naudodami Middleware, galime peradresuoti naudotojus į puslapius jų pageidaujama kalba.
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);
}
Būtinai sukonfigūruokite matcher
pagal Next.js tarpinio programavimo dokumentaciją.
Kliente galite pakeisti locale
slapuką, kad nuspręstumėte, kokia kalba vartotojas nori naudotis. Daugiau idėjų, kaip tai padaryti, rasite pilname pavyzdžių kode!
5 žingsnis: Diegimas ir testavimas!
Mes baigėme! Jūsų React programa dabar bus automatiškai išversta, kai tik pridėsite bet kokias eilutes į Translate
komponentą. Atkreipkite dėmesį, kad tik aplinkos su read/write
teisėmis API rakte galės kurti naujas eilutes vertimui. Rekomenduojame turėti uždarą ir saugią tarpinę aplinką, kurioje galėtumėte testuoti savo gamybinę programą su tokio tipo API raktu, pridėdami naujas eilutes prieš paleidžiant gyvai. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galimai užpildytų jūsų vertimo projektą naujomis, nesusijusiomis eilutėmis.
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!