Kaip įgyvendinti internacionalizaciją Next.js programoje, kuri naudoja Pages Router

Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau, kad interneto kūrėjai kurtų programas, galinčias 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 datų formatams.

Šiame vadove aptarsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės renderinimą. TL;DR: Pilną pavyzdį rasite čia.

Šis vadovas skirtas Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, vietoje to peržiūrėkite šį vadovą.

Žingsnis 1: Įdiekite i18n biblioteką

Norint įgyvendinti tarptautiškumą (i18n) jūsų Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra keletas populiarių bibliotekų, įskaitant next-intl. Tačiau šiame pavyzdyje mes naudosime TacoTranslate.

TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą naudodama pažangų dirbtinį intelektą ir atlaisvina jus nuo nuobodaus JSON failų valdymo.

Įdiekime jį naudodami npm savo terminale:

npm install tacotranslate

Žingsnis 2: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai įdiegėte modulį, laikas sukurti TacoTranslate paskyrą, vertimo projektą ir su tuo 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ą. Išsaugosime juos kaip aplinkos kintamuosius. read raktą vadiname public, o read/write raktą — secret. Pavyzdžiui, galite pridėti juos į projekto šakniniame kataloge esantį .env failą.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Užtikrinkite, kad slaptas read/write API raktas niekada nebūtų atskleistas klientinės pusės gamybos aplinkose.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytasis atsarginis lokalės kodas. Šiame pavyzdyje nustatysime jį į en (anglų).
• TACOTRANSLATE_ORIGIN: „aplankas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, jūsų svetainės URL. Daugiau apie originus skaitykite čia.

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

3 žingsnis: TacoTranslate nustatymas

Norėdami integruoti TacoTranslate su savo programa, turėsite sukurti klientą naudodami anksčiau gautus 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Netrukus automatiškai nustatysime TACOTRANSLATE_API_KEY.

Kliento sukūrimas atskirame faile palengvina jo vėlesnį naudojimą. Dabar, naudodami pasirinktą /pages/_app.tsx, pridėsime TacoTranslate teikė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 pasirinktines pageProps ir _app.tsx, prašome išplėsti apibrėžimą, pridėdami aukščiau pateiktas savybes ir kodą.

4 žingsnis: Serverio pusės renderavimo įgyvendinimas

TacoTranslate leidžia vykdyti jūsų vertimų serverinį atvaizdavimą. Tai ženkliai pagerina vartotojo patirtį — iš karto rodomas išverstas turinys, o ne trumpas neversto turinio blyksnis. Be to, kliento pusėje galime praleisti tinklo užklausas, nes jau turime visus reikalingus vertimus.

Pradėsime sukurdami arba modifikuodami /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ų nustatymus. Jei true, TacoTranslate pateiks viešąjį API raktą. Jei esame vietinėje, testavimo arba parengiamoje aplinkoje (isProduction is false), naudosime slaptą read/write API raktą, kad užtikrintume, jog naujos eilutės būtų išsiųstos vertimui.

Iki šiol Next.js programoje nustatėme tik palaikomų kalbų sąrašą. Kitas žingsnis — gauti vertimus visiems jūsų puslapiams. Tam, pagal savo poreikius, naudokite arba getTacoTranslateStaticProps arba getTacoTranslateServerSideProps.

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir papildomus Next.js parametrus. Atkreipkite dėmesį, kad revalidate funkcijoje getTacoTranslateStaticProps pagal nutylėjimą nustatytas į 60, kad jūsų vertimai būtų nuolat atnaujinami.

Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite puslapio failą, pavyzdžiui, /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 eilutės visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

Žingsnis 5: Diegti ir išbandyti!

Mes baigėme! Jūsų React programėlė dabar bus automatiškai išversta, kai į Translate komponentą pridėsite bet kokias eilutes. Atkreipkite dėmesį, kad tik aplinkos, kurių API rakto leidimai yra read/write, galės sukurti naujas eilutes, kurios bus verčiamos. Rekomenduojame turėti uždarą ir saugią testavimo (staging) aplinką, kur galėtumėte išbandyti savo gamybinę programą su tokiu API raktu ir pridėti naujas eilutes prieš pradedant eksploatuoti. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galimai pripildytų jūsų vertimų projektą naujomis, nesusijusiomis eilutėmis.

Būtinai peržiūrėkite pilną pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router! Jei susidursite su kokiomis nors problemomis, nedvejodami susisiekite, ir mes mielai padėsime.

TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į ir iš daugiau nei 75 kalbų. Pradėkite šiandien!