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

Kuo pasaulis tampa vis labiau globalizuotas, tuo svarbiau tampa žiniatinklio kūrėjams kurti programas, pritaikytas vartotojams iš skirtingų šalių ir kultūrų. 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 apžvelgsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverinį atvaizdavimą. TL;DR: Pilną pavyzdį rasite čia.

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

1 žingsnis: Įdiekite i18n biblioteką

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

TacoTranslate automatiškai verčia jūsų eilutes į bet kurią kalbą naudodamas pažangų dirbtinį intelektą ir atleidžia jus nuo varginančio JSON failų tvarkymo.

Įdiekime jį naudodami npm terminale:

npm install tacotranslate

Antras žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai įdiegėte modulį, laikas sukurti 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 pereikite į 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 juos pridėti į .env failą savo projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Niekada neatskleiskite 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: 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. Skaitykite daugiau apie originus č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 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 apibrėšime TACOTRANSLATE_API_KEY.

Kliento sukūrimas atskirame faile palengvina jo vėlesnį pakartotinį naudojimą. Dabar, naudodami tinkintą /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, išplėskite apibrėžimą pridėdami aukščiau nurodytas savybes ir kodą.

Žingsnis 4: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate palaiko jūsų vertimų serverinį atvaizdavimą. 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 visus reikalingus 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ų nustatymus. Jei true, TacoTranslate pateiks viešąjį API raktą. Jei esame vietinėje, testinėje arba parengiamojoje aplinkoje (isProduction is false), naudosime slaptąjį read/write API raktą, kad naujos eilutės būtų išsiųstos vertimui.

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

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir pasirenkamas Next.js savybes. Atkreipkite dėmesį, kad getTacoTranslateStaticProps funkcijoje revalidate pagal numatytuosius nustatymus yra nustatytas į 60, todėl jūsų vertimai išlieka atnaujinami.

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

import {Translate} from 'tacotranslate/react';

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

Žingsnis 5: Diegti ir išbandyti!

Viskas! Jūsų React programa dabar bus automatiškai išversta, kai į Translate komponentą pridėsite bet kokias eilutes. Atkreipkite dėmesį, kad tik tos aplinkos, kurių API raktui suteiktos read/write teisės, galės sukurti naujas vertimui skirtas eilutes. Rekomenduojame turėti uždarą ir saugią parengimo (staging) aplinką, kurioje galite išbandyti savo produkcinę aplikaciją su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant ją gyvai. Tai neleis kam nors kam nors pavogti jūsų slaptąjį API raktą ir galimai išpūsti jūsų vertimų projektą pridėjus naujų, nesusijusių eilutų.

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, drąsiai susisiekite, ir mes mielai padėsime.

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