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

Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau yra tinkamai sukurti programas, kurios atitiktų vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra internacionalizacija (i18n), leidžianti pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datos formatams.

Šiame pamokoje nagrinėsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos su serverio pusės atvaizdavimu. TL;DR: Peržiūrėkite visą pavyzdį čia.

Šis vadovas skirtas Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome vadovautis šiuo vadovu.

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ų tekstus į bet kurią kalbą naudodamas pažangų dirbtinį intelektą ir atlaisvina jus nuo varginančio JSON bylų tvarkymo.

Įdiekime tai naudodami npm jūsų terminale:

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai įdiegėte modulį, laikas sukurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurti 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ą. Išsaugosime juos kaip aplinkos kintamuosius. read raktą vadiname public, o read/write raktas yra secret. Pavyzdžiui, juos galite pridėti prie .env failo, esančio jūsų projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Įsitikinkite, kad niekada neišsiduosite slaptą read/write API raktą į kliento pusės gamybos aplinkas.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytoji atsarginė 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. Skaitykite daugiau apie kilmę čia.

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

3 žingsnis: TacoTranslate nustatymas

Norint integruoti TacoTranslate su jūsų programėle, reikės sukurti klientą, naudojant 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 kūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. Dabar, naudodami pasirinktą /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 pasirinktinius pageProps ir _app.tsx, prašome išplėsti apibrėžimą su aukščiau pateiktais parametrais ir kodu.

4 žingsnis: Serverinio puslapio atvaizdavimo įgyvendinimas

TacoTranslate leidžia vykdyti savo vertimų serverio pusėje atvaizdavimą. Tai žymiai pagerina vartotojo patirtį, rodant iš karto išverstą turinį, o ne pirmiausia trumpą neišversto turinio blyksnį. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visus reikalingus vertimus.

Pradėsime kurdami 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ų 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 tik nustatėme Next.js programai palaikomų kalbų sąrašą. 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ą, konfiguraciją TacoTranslate ir pasirenkamas Next.js savybes. Atkreipkite dėmesį, kad revalidate parametro reikšmė getTacoTranslateStaticProps pagal numatytuosius nustatymus yra 60, todėl jūsų vertimai bus 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ą versti eilutes visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

5 žingsnis: Diegimas ir testavimas!

Mes baigėme! Jūsų React programa dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad naujų verčiamų eilučių kūrimas bus galima tik aplinkose, turinčiose read/write leidimus su API raktu. Rekomenduojame turėti uždarą ir saugią testavimo (staging) aplinką, kur galėtumėte išbandyti savo gamybinę programą su tokio tipo API raktu, pridedant naujas eilutes prieš paleidžiant. Tai padės apsaugoti jūsų slaptą API raktą nuo pavogimo ir apsaugos jus nuo galimos vertimo projekto apkrovos 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 kokiomis nors problemomis, nedvejodami susisiekite, ir mes mielai jums padėsime.

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