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

Kai pasaulis tampa vis labiau globalus, interneto kūrėjams vis svarbiau kurti programas, pritaikytas vartotojams iš skirtingų šalių ir kultūrų. 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 apžvelgsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės renderinimą. TL;DR: Peržiūrėkite visą pavyzdį č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 kelios populiarios bibliotekos, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.

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

Įdiekime ją naudodami npm terminale:

npm install tacotranslate

Žingsnis 2: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulis įdiegtas, metas susikurti TacoTranslate paskyrą, vertimo projektą ir atitinkamus API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja, kad pridėtumėte kreditinę kortelę.

Sukurkite projektą TacoTranslate programos vartotojo sąsajoje ir eikite į jo API raktų skirtuką. Sukurkite vieną read raktą ir vieną read/write raktą. Mes juos išsaugosime kaip aplinkos kintamuosius. read raktas yra tas, kurį vadiname public ir read/write raktas yra secret. Pavyzdžiui, galite juos pridėti prie .env failo jūsų projekto šakniniame kataloge.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Slaptas read/write API raktas jokiu būdu neturėtų būti atskleidžiamas 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, skirtą anglų kalbai.
• TACOTRANSLATE_ORIGIN: „aplankas“, kuriame bus saugomi jūsų tekstai, 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

Norint integruoti TacoTranslate su jūsų programa, 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Mes netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY.

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

Žingsnis 4: Serverio pusės atvaizdavimo įgyvendinimas

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

Pradėsime kurdami arba keisdami /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'),
	});
};

Modifikuokite isProduction patikrinimą, kad jis atitiktų jūsų nustatymus. Jei true, TacoTranslate parodys viešąjį API raktą. Jei esame vietinėje, testavimo ar parengiamojoje aplinkoje (isProduction is false), naudosime slaptąjį read/write API raktą, kad įsitikintume, jog naujos eilutės siunčiamos vertimui.

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

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

Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite tokį puslapio failą: /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 išbandyti!

Baigta! Jūsų React programa dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write teises prie API rakto, galės kurti naujas eilutes, kurias bus galima išversti. Rekomenduojame turėti uždarą ir saugią staging aplinką, kurioje galėtumėte išbandyti savo produkcinę programą su tokiu API raktu, pridėdami naujas eilutes prieš diegiant ją į gamybą. Tai neleis, kad bet kas bet kas pavogtų jūsų slaptą API raktą ir galbūt išpūstų jūsų vertimo projektą pridėjus naujų, nesusijusių eilučių.

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 problemomis, nedvejodami susisiekite, ir mes mielai jums padėsime.

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