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

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

Selles õpetuses uurime, kuidas lisada rahvusvahelistumine teie React Next.js rakendusse koos serveripoolse renderdamisega. 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 palun selle asemel seda juhendit.

Samm 1: Paigalda i18n teek

Kui soovite oma Next.js rakenduses rahvusvahelistumist (i18n) rakendada, valime esmalt sobiva i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Siiski kasutame selles näites TacoTranslate.

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

Paigaldame selle oma 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õtmestik. Loo konto siit. See on tasuta ning ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja mine selle API keys 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 secret-ks. Näiteks võid need lisada oma projekti juurkausta asuvasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veendu, et sa ei lekitaks kunagi salajast read/write API võtit kliendipoolsetesse tootmiskeskkondadesse.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagavara 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 päritolu kohta.

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

3. samm: TacoTranslate seadistamine

TacoTranslate’i integreerimiseks oma rakendusega pead looma kliendi, kasutades eelnevalt saadud API võtmeid. Näiteks loo 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 automaatselt peagi TACOTRANSLATE_API_KEY.

Kliendi loomine eraldi failis teeb 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 teil on juba kohandatud pageProps ja _app.tsx, siis palun laiendage definitsiooni ülaltoodud omaduste ja koodiga.

4. samm: Serveripoolse renderduse rakendamine

TacoTranslate võimaldab serveripoolset renderdamist teie tõlgetele. See parandab oluliselt kasutajakogemust, kuvades kohe tõlgitud sisu, mitte esmalt mittetõlgitud sisu välgu. Lisaks saame kliendi võrgupäringuid vahele jätta, sest meil on juba kõik vajalikud tõlked olemas.

Alustame /next.config.js faili 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, kuvab TacoTranslate avaliku API võtme. Kui me oleme lokaalses, test- või staging keskkonnas (isProduction is false), kasutame salajast read/write API võtit, et tagada uute strings'te saatmine tõlkimiseks.

Senini oleme seadistanud Next.js rakenduse ainult toetatud keelte nimekirjaga. Järgmiseks saad tõlked kõigile oma lehtedele. Selleks kasutad kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps, sõltuvalt oma vajadustest.

Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, TacoTranslate konfiguratsiooni ja valikulisi Next.js omadusi. Pane tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtusele 60, et sinu tõlked oleksid ajakohased.

Et kasutada üht neist funktsioonidest lehel, oletame, et sul 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 suutma kasutada Translate komponenti, et tõlkida stringe kõigis teie React komponentides.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Paigalda ja testi!

Oleme valmis! Teie React rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringi Translate komponendile. Pange tähele, et ainult keskkonnad, millel on read/write õigused API võtmele, saavad luua uusi tõlgitavaid stringe. Soovitame teil omada suletud ja turvalist staging-keskkonda, kus saate testida oma tootmisrakendust sellise API võtmega, lisades enne avalikustamist uusi stringe. See hoiab ära selle, et keegi varastaks teie salajast API võtit ja takistab teie tõlketeprojekti paisumist uute, ebaoluliste stringide lisamisega.

Veenduge, et vaataksite meie GitHubi profiilil kogu näidet. Seal leiate ka näite, kuidas seda teha kasutades App Router! Kui teil tekib mingeid probleeme, võtke julgelt ühendust, ja me aitame teid hea meelega.

TacoTranslate võimaldab teil automaatselt lokaliseerida oma Reacti rakendusi kiiresti enam kui 75 keelde ja sealt tagasi. Alustage juba täna!