Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab Pages Router

Maailma globaliseerudes on veebiarendajatel üha olulisem luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistamine (i18n), mis võimaldab kohandada teie rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles juhendis uurime, kuidas lisada rahvusvahelistamine teie React Next.js rakendusse serveripoolse renderdamise abil. TL;DR: Vaata täielikku näidet siit.

See juhend on mõeldud Next.js rakendustele, mis kasutavad Pages Router.
Kui kasutate App Router, vaadake selle asemel seda juhendit.

Samm 1: Paigalda i18n-teek

Et rakendada oma Next.js rakenduses rahvusvahelistamist (i18n), valime esmalt i18n-teegi. On mitu populaarset teeki, sealhulgas next-intl. Siiski kasutame selles näites TacoTranslate.

TacoTranslate tõlgib teie stringid automaatselt ükskõik millisesse keelde, kasutades tipptasemel tehisintellekti, ning vabastab teid JSON-failide tüütust haldamisest.

Paigaldame selle teie terminalis, kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate konto

Nüüd, kui olete mooduli installinud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API-võtmed. Loo konto siit. See on tasuta ja ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu selle API-võtmete vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtit nimetame public, ning read/write võtit nimetame secret. Näiteks võid need lisada oma projekti juurkausta asuvasse faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veenduge, et te ei lekitaks kunagi salajast read/write API-võtit kliendipoolsesse tootmiskeskkondadesse.

Lisame ka veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varulokaali kood. Selles näites määrame selle väärtuseks en (inglise keel).
• TACOTRANSLATE_ORIGIN: “kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originitest lähemalt.

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

Samm 3: TacoTranslate'i seadistamine

TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt mainitud API-võtmeid. Näiteks looge fail nimega /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;

Me määrame TACOTRANSLATE_API_KEY varsti automaatselt.

Kliendi loomine eraldi faili muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd, kasutades kohandatud /pages/_app.tsx, lisame TacoTranslate provideri.

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>
	);
}

Kui sul on juba kohandatud pageProps ja _app.tsx, siis lisa definitsiooni ülaltoodud omadused ja kood.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, sest tõlgitud sisu kuvatakse kohe, selle asemel et esmalt näidata lühikest tõlkimata sisu vilkumist. Lisaks võime kliendipoolsed võrgupäringud vahele jätta, kuna meil on juba kõik vajalikud tõlked olemas.

Alustame faili /next.config.js loomise või muutmisega.

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'),
	});
};

Muuda isProduction kontroll vastavaks oma seadistusele. Kui true, kasutab TacoTranslate avalikku API-võtit. Kui me oleme lokaalses, test- või staging‑keskkonnas (isProduction is false), kasutame salajast read/write API-võtit, et tagada, et uued stringid saadetakse tõlkimiseks.

Senini oleme Next.js-rakenduse seadistanud ainult toetatud keelte loendiga. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutage kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps vastavalt teie vajadustele.

Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, TacoTranslate'i konfiguratsiooni ja valikulisi Next.js-i omadusi. Pange tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtuseks 60, nii et teie tõlked püsivad ajakohased.

Kui soovite kumbagi funktsiooni lehel kasutada, oletame, et teil on lehefail nagu /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!"/>;
}

Nüüd peaksite saama kasutada Translate komponenti, et tõlkida stringe kõigis oma React-komponentides.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Juuruta ja testi!

Valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate komponendile. Pange tähele, et ainult keskkonnad, millel on API‑võtmel read/write õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame omada suletud ja turvatud staging‑keskkonda, kus saate testida oma tootmisrakendust sellise API‑võtmega ning lisada uusi stringe enne avalikustamist. See takistab kedagi kedagi teie salajast API‑võtit varastamast ja potentsiaalselt paisutamast teie tõlkeprojekti, lisades uusi, mitteseotud stringe.

Kindlasti vaata meie GitHubi profiilil olevat täielikku näidet. Sealt leiad ka näite, kuidas seda teha, kasutades App Router! Kui sul tekib mingeid probleeme, võta julgelt ühendust, ja me aitame meeleldi.

TacoTranslate võimaldab sul automaatselt lokaliseerida oma Reacti rakendusi kiiresti rohkem kui 75 keelde ja tagasi. Alusta juba täna!