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, peržiūrėkite šį vadovą.

Žingsnis 1: Į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ą naudodamas pažangų dirbtinį intelektą ir atlaisvina jus nuo varginančio JSON failų valdymo.

Įdiekime jį naudodami npm jūsų terminale:

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulį jau įdiegėte, laikas susikurti savo TacoTranslate paskyrą, vertimų projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikia pridėti kreditinės kortelės.

Savo 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 raktas yra tai, ką vadiname public, o read/write raktas yra secret. Pavyzdžiui, galite įtraukti juos į .env failą jūsų projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Niekada neatskleiskite slapto 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ų kalbai).
• 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 į savo programą, turėsite sukurti klientą, naudodami anksčiau nurodytus 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 vėlesnį jo naudojimą. Dabar, naudojant 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 tinkintus pageProps ir _app.tsx, prašome išplėsti apibrėžimą pridėdami aukščiau nurodytas savybes ir kodą.

4 žingsnis: Serverio pusės renderavimo įgyvendinimas

TacoTranslate palaiko vertimų serverinį atvaizdavimą. Tai žymiai pagerina vartotojo patirtį — iš karto rodomas išverstas turinys, o ne pirmiausia trumpai pasirodantis neišverstas turinys. 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, 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 mes tik sukonfigūravome Next.js programą su palaikomų kalbų sąrašu. Kitas žingsnis — gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps arba getTacoTranslateServerSideProps, priklausomai nuo jūsų poreikių.

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

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 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 kokius tekstus. Atkreipkite dėmesį, kad tik tos aplinkos, kurių API raktui suteiktos read/write teisės, galės kurti naujas versti skirtas eilutes. Rekomenduojame turėti uždarą ir saugią parengiamąją (staging) aplinką, kurioje galite išbandyti savo gamybinę programą su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant gyvai. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galimai išpūstų vertimų projektą pridėdami naujas, nesusijusias eilutes.

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

TacoTranslate automatiškai lokalizuoja jūsų React programas į ir iš daugiau nei 75 kalbų. Pradėkite šiandien!