Kuidas rakendada lokaliseerimist Next.js rakenduses, mis kasutab Pages Router-it

Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistamine (i18n), mis võimaldab kohandada teie rakendus erinevatele keeltele, valuutadele ja kuupäeva formaatidele.

Selles õppes käsitleme, kuidas lisada rahvusvahelistamine oma React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaata täielikku näidet siin.

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

1. samm: Paigalda i18n teek

Internatsionaliseerimise rakendamiseks oma Next.js rakenduses valime kõigepealt i18n raamistiku. On mitu populaarset raamistiku, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.

TacoTranslate tõlgib teie tekstid automaatselt mis tahes keelde, kasutades tipptasemel tehisintellekti, ning vabastab teid tüütust JSON-failide haldamisest.

Paigaldame selle terminalis kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate konto

Nüüd, kui sul on moodul paigaldatud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API võtmendid. Loo konto siin. 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 ja read/write võtit nimetame secret-ks. Näiteks võid need lisada oma projekti juurkataloogi .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veenduge, et te kunagi ei lekita saladuslikku read/write API võtit kliendi poolsetesse tootmiskeskkondadesse.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagasipõrke lokaali kood. Selles näites määrame selle väärtuseks en inglise keele jaoks.
• TACOTRANSLATE_ORIGIN: „Kaust“, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit rohkem originaalide kohta.

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

Samm 3: TacoTranslate seadistamine

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;

Me määrame peagi automaatselt TACOTRANSLATE_API_KEY.

Kliendi loomine eraldi failis muudab selle hilisema taaskasutamise lihtsamaks. Nüüd lisame kohandatud /pages/_app.tsx abil TacoTranslate pakkuja.

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 palun laienda definitsiooni ülaltoodud omaduste ja koodiga.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab serveripoolset renderdamist teie tõlgetele. See parandab kasutajakogemust märkimisväärselt, näidates kohe tõlgitud sisu, mitte esmalt lühikest hetke mittetõlgitud sisust. Lisaks saame kliendi poolel võrgu päringuid vahele jätta, sest meil on juba kõik vajalikud tõlked olemas.

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

Muutke isProduction kontrolli vastavalt oma seadistusele. Kui true, toob TacoTranslate välja avaliku API võtme. Kui oleme kohalikus, test- või lavastuskeskkonnas (isProduction is false), kasutame salajase read/write API-võtit, et veenduda, et uued stringid saadetakse tõlkimiseks.

Siiani oleme seadistanud Next.js rakenduse ainult toetatud keelte loendiga. Järgmine asi, mida me teeme, on tuua tõlked kõigile teie lehtedele. Selleks kasutate vastavalt oma vajadustele kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps .

Need funktsioonid võtavad kolm argumenti: üks Next.js Static Props Context objekt, TacoTranslate'i konfiguratsioon ja valikulised Next.js atribuudid. Pange tähele, et revalidate on getTacoTranslateStaticProps on vaikimisi seatud väärtusele 60, et teie tõlked oleksid ajakohased.

Kummagi funktsiooni kasutamiseks lehel oletame, et teil on selline 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 suutma 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: Käivita ja testi!

Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe komponendile Translate. Pange tähele, et ainult keskkonnad, millel on API-võtme jaoks read/write õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame kasutada suletud ja turvalist staging-keskkonda, kus saate oma tootmisrakendust sellise API-võtmega testida ja enne avalikustamist uusi stringe lisada. See aitab vältida teie salajase API-võtme varastamist ning takistada teie tõlkimisprojekti paisumist uute, mitteseotud stringide lisamisega.

Veendu, et vaatad meie GitHubi profiilil täielikku näidet. Seal leiad ka näite, kuidas seda teha App Router abil! Kui sul tekib probleeme, võta julgelt ühendust, ja me aitame sind meeleldi.

TacoTranslate võimaldab sul oma Reacti rakendusi kiiresti automaatselt kohalikustada suvalises keeles ja keelde. Alusta juba täna!