Kaip įgyvendinti internacionalizaciją Next.js programoje, naudojančioje Pages Router

Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau interneto kūrėjams kurti programas, atitinkančias vartotojų iš skirtingų šalių ir kultūrų poreikius. Vienas iš pagrindinių būdų to pasiekti yra internacionalizacija (i18n), kuri leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.

Šiame vadove mes nagrinėsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės atvaizdavimą. TL;DR: Čia rasite pilną pavyzdį.

Šiame vadove skirta Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome peržiūrėti šį vadovą.

1 žingsnis: Įdiekite i18n biblioteką

Norėdami įgyvendinti tarptautiškumą savo Next.js aplikacijoje, pirmiausia pasirinkime i18n biblioteką. Yra keletas populiarių bibliotekų, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.

TacoTranslate automatiškai išverčia jūsų eilutes į bet kurią kalbą pasitelkdamas pažangiąją DI ir atleidžia 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, laikas susikurti TacoTranslate paskyrą, vertimo projektą ir susietus API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja 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 raktą vadiname public (viešasis), o read/write raktą – secret (slaptasis). Pavyzdžiui, juos galite pridėti į .env failą, esantį jūsų projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišskleisite slaptos read/write API rakto kliento pusės gamybos aplinkose.

Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE ir TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytoji atsarginė lokalė. Šiame pavyzdyje nustatysime ją į en – anglų kalbai.
• TACOTRANSLATE_ORIGIN: „Aplankas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, jūsų svetainės URL. Čia skaitykite daugiau apie originus.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3 žingsnis: TacoTranslate nustatymas

Norėdami integruoti TacoTranslate su jūsų programa, turėsite sukurti klientą naudodami anksčiau gautus API raktus. Pavyzdžiui, sukurkite failą, pavadintą /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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Mes netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY.

Kliento sukūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. Dabar, naudojant pritaikytą /pages/_app.tsx, pridėsime TacoTranslate tiekėją.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Jei jau turite suasmenintus pageProps ir _app.tsx, prašome išplėsti apibrėžimą atitinkamomis aukščiau nurodytomis savybėmis ir kodu.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia atlikti jūsų vertimų serverinį atvaizdavimą. Tai ženkliai pagerina vartotojo patirtį, rodant iš karto išverstą turinį, o ne pirmiausia trumpą nevertos informacijos mirksnį. Be to, galime apeiti tinklo užklausas kliento pusėje, nes jau turime visus reikiamus vertimus.

Pradėsime kurdami arba redaguodami /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

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.

Iki šiol mes nustatėme Next.js programą tik su palaikomų kalbų sąrašu. Kitas žingsnis – gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps, arba getTacoTranslateServerSideProps pagal jūsų poreikius.

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, konfigūraciją TacoTranslate ir pasirenkamas Next.js savybes. Atkreipkite dėmesį, kad revalidate parametro reikšmė getTacoTranslateStaticProps funkcijoje numatyta 60, kad jūsų vertimai būtų nuolat atnaujinami.

Norint naudoti bet kurią iš funkcijų puslapyje, tarkime, kad turite puslapio failą, kaip /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Dabar turėtumėte galėti naudoti Translate komponentą, kad išverstumėte tekstus visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5 žingsnis: Diegti ir testuoti!

Baigėme! Jūsų React programėlė dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos su read/write leidimais API raktui galės kurti naujas eilutes vertimui. Rekomenduojame turėti uždarą ir saugią testavimo aplinką, kurioje galėsite patikrinti savo gamybos programėlę su tokio tipo API raktu, pridėdami naujas eilutes prieš diegiant į gamybą. Tai apsaugos nuo jūsų slaptųjų API raktų pavogimo ir galimo vertimų projekto užpildymo naujomis, nesusijusiomis eilutėmis.

Būtinai pasitikrinkite pilną pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router! Jei susidursite su kokiomis nors problemomis, drąsiai kreipkitės, ir mes būsime daugiau nei laimingi jums padėti.

TacoTranslate leidžia jums automatiškai lokalizuoti jūsų React programas greitai į bet kurią ir iš bet kurios kalbos. Pradėkite jau šiandien!