Kaip įgyvendinti internacionalizaciją Next.js programoje, kuri naudoja App Router
Padarykite savo React programą labiau prieinamą ir pasiekite naujas rinkas naudodami tarptautiškumą (i18n).
Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau tampa interneto kūrėjams kurti programas, kurios gali patenkinti vartotojų iš skirtingų šalių ir kultūrų poreikius. Vienas iš pagrindinių būdų tai pasiekti yra internacionalizacija (i18n), kuri leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datos formatams.
Šiame straipsnyje aptarsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės peržiūrą. TL;DR: Pilną pavyzdį rasite čia.
Šis vadovas skirtas Next.js programoms, kurios naudoja App Router.
Jei naudojate Pages Router, vietoje to žiūrėkite šį vadovą.
1 žingsnis: Įdiekite i18n biblioteką
Norėdami įgyvendinti lokalizaciją savo Next.js programoje, pirmiausia pasirinksime i18n biblioteką. Yra keletas populiarių bibliotekų, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.
TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą, naudodamas pažangią DI technologiją, ir atlaisvina jus nuo varginančio JSON failų valdymo.
Įdiekime ją naudodami npm savo terminale:
npm install tacotranslate
2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą
Dabar, kai modulis įdiegtas, metas susikurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama, ir nereikia pridėti kreditinės kortelės.
TacoTranslate programos vartotojo sąsajoje sukurkite projektą ir eikite į jo API raktų skirtuką. Sukurkite vieną read
raktą ir vieną read/write
raktą. Juos išsaugosime kaip aplinkos kintamuosius. read
raktas yra tai, ką vadiname public
, o read/write
raktas yra secret
. Pavyzdžiui, juos galite įdėti į .env
failą jūsų projekto šakniniame kataloge.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Būkite tikri, kad niekada neišleisite slapto read/write
API rakto į kliento pusės gamybos aplinkas.
Taip pat pridėsime dar du aplinkos kintamuosius: TACOTRANSLATE_DEFAULT_LOCALE
ir TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Numatytoji atsarginė lokalė. Šiame pavyzdyje ją nustatysime kaipen
– anglų kalbai.TACOTRANSLATE_ORIGIN
: „Aplankas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, jūsų svetainės URL. Daugiau apie origins skaitykite čia.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3 Žingsnis: TacoTranslate nustatymas
Norėdami integruoti TacoTranslate į savo programą, turėsite sukurti klientą, naudodami anksčiau pateiktus 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;
Mes netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY
ir TACOTRANSLATE_PROJECT_LOCALE
.
Kliento sukūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. getLocales
yra tik pagalbinė funkcija su įmontuotu klaidų tvarkymu. Dabar sukurkite failą pavadinimu /app/[locale]/tacotranslate.tsx
, kur įgyvendinsime TacoTranslate
teikė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į reikia atkreipti dėmesį, yra tai, kad mes naudojame mūsų Dynamic Route
parametrą [locale]
norėdami gauti 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 per 60 sekundžių perstatyti puslapį ir palaikyti jūsų vertimus atnaujintus.
4 žingsnis: Serverio pusės renderinimo įgyvendinimas
TacoTranslate palaiko serverio pusės renderinimą. Tai žymiai pagerina vartotojo patirtį, nes iš karto rodomas išverstas turinys, o ne pirmiausia trumpas neišversto turinio blyksnis. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime reikiamus vertimus puslapiui, kurį vartotojas žiūri.
Norint nustatyti serverio pusės renderingą, sukurkite arba modifikuokite /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.
Kad užtikrintume, jog maršrutizavimas ir peradresavimas veikia kaip tikėtasi, turėsime sukurti failą pavadinimu /middleware.ts
. Naudodami Middleware, galime peradresuoti vartotojus į puslapius, pateikiamus 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 Middleware dokumentaciją.
Kliento pusėje galite pakeisti locale
slapuką, kad pakeistumėte vartotojo pageidaujamą kalbą. Prašome peržiūrėti pilną pavyzdinį kodą, jei norite sužinoti, kaip tai padaryti!
5 žingsnis: Diegimas ir testavimas!
Mes baigėme! Jūsų React programėlė dabar bus automatiškai verčiama, kai pridėsite bet kokias eilutes į Translate
komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write
teises API rakte, galės kurti naujas eilutes vertimui. Rekomenduojame turėti uždarą ir saugią parengiamąją (staging) aplinką, kurioje galėtumėte išbandyti savo gamybinę programėlę su tokiu API raktu, pridėdami naujų eilučių prieš paleidžiant ją į gamybą. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir potencialiai užpildytų vertimų projektą nereikalingomis, 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!