Kaip įgyvendinti tarptautiškumą Next.js programoje, naudojančioje Pages Router

Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau tampa interneto kūrėjams kurti programas, kurios galėtų aptarnauti vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra tarptautinimas (i18n), kuris leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.

Šiame vadove išnagrinėsime, kaip pridėti tarptautinimą prie jūsų React Next.js programos su serverio pusės atvaizdavimu. TL;DR: Čia rasite visą pavyzdį.

Šis vadovas skirtas Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome žiūrėti šį vadovą.

1 žingsnis: Įdiekite i18n biblioteką

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

TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą, naudodamas pažangią AI technologiją, ir atlaisvina jus nuo varginančio JSON failų tvarkymo.

Įdiekime ją 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. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja kreditinės kortelės pridėjimo.

TacoTranslate programos naudotojo sąsajoje sukurkite projektą 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 vadinamas public ir read/write raktas yra secret. Pavyzdžiui, galite juos įrašyti į .env failą, esantį jūsų projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišskleisite slaptųjų read/write API raktų klientinėje gamybos aplinkoje.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytoji atsarginė lokalė. Šiame pavyzdyje nustatysime en anglų kalbai.
• TACOTRANSLATE_ORIGIN: „aplankas“, kuriame bus saugomi jūsų tekstai, pavyzdžiui, jūsų svetainės URL. Daugiau apie šaltinius skaitykite čia.

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

3 žingsnis: TacoTranslate nustatymas

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 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ą pridėdami aukščiau pateiktas savybes ir kodą.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia atlikti jūsų vertimų serverio pusės atvaizdavimą. Tai žymiai pagerina naudotojo patirtį, rodant iš karto išverstą turinį, o ne pirmiausia trumpam parodytą neišverstą turinį. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visas reikalingas 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 Next.js programą nustatydavome tik su palaikomų kalbų sąrašu. Kitas dalykas, kurį padarysime, yra gauti visų jūsų puslapių vertimus. Norėdami tai padaryti, naudosite getTacoTranslateStaticProps arba getTacoTranslateServerSideProps pagal savo poreikius.

Šioms funkcijoms reikia trijų argumentų: vienas Next.js Static Props Context objektas, "TacoTranslate" konfigūracija ir pasirinktinės Next.js ypatybės. Atminkite, kad getTacoTranslateStaticProps revalidate pagal numatytuosius nustatymus nustatyta į 60, kad vertimai būtų nuolat atnaujinami.

Norėdami puslapyje naudoti bet kurią funkciją, 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 tekstus 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 kokių tekstų į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write leidimus API raktui, galės kurti naujus tekstus vertimui. Rekomenduojame turėti uždarą ir saugią testavimo aplinką, kurioje galėtumėte išbandyti savo gamybinę programą su tokiu API raktu, pridėdami naujus tekstus prieš paleidžiant į gyvą aplinką. Tai užkirs kelią bet kam pavogti jūsų slaptą API raktą ir potencialiai apsunkinti jūsų vertimų projektą pridėdami naujus, nesusijusius tekstus.

Būtinai peržiūrėkite pilną pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router ! Jei kils kokių problemų, drąsiai kreipkitės, ir mes su malonumu jums padėsime.

TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į bet kurią kalbą ir iš jos. Pradėkite jau šiandien!