Kuidas rakendada rahvusvahelistamist (i18n) 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 vaatleme, kuidas lisada rahvusvahelistamist 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 selle asemel seda juhendit.

Samm 1: Paigaldage i18n-teek

Selleks, et oma Next.js rakendusse lisada rahvusvahelistamine (i18n), valime esmalt ühe i18n-teegi. On mitu populaarset teeki, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.

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

Paigaldame selle terminalis, kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate konto

Nüüd, kui sul on moodul installitud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API‑võtmed. Loo konto siit. See on tasuta ning ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja navigeeri 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 secret. Näiteks võid lisada need oma projekti juurkaustas asuvasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Lisame ka veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varukeele 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 päritolude kohta lähemalt.

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

3. samm: TacoTranslate seadistamine

TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt saadud 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 teil on juba kohandatud pageProps ja _app.tsx, palun täiendage definitsiooni eespool toodud omaduste ja koodiga.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, kuvades tõlgitud sisu kohe, selle asemel et esmalt näidata lühikest tõlkimata sisu vilkumist. Lisaks saame kliendipoolseid 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'),
	});
};

Muuda isProduction kontrolli vastavalt 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 veenduda, et uued stringid saadetakse tõlkimiseks.

Siiani oleme Next.js-rakenduse seadistanud ainult toetatud keelte loendiga. Järgmiseks hangime tõlked kõigi teie lehtede jaoks. Selleks kasutate vastavalt oma vajadustele kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps.

Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, konfiguratsiooni TacoTranslate'i jaoks ja valikulised Next.js-i omadused. Pange tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtuseks 60, nii et teie tõlked jäävad ajakohasteks.

Selleks, et kasutada kumbagi funktsiooni lehel, 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 kõigis oma React-komponentides olevaid stringe.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Juuruta ja testi!

Oleme valmis! Teie React-rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate komponendile. Pange tähele, et ainult keskkonnad, millel on API‑võtmele read/write õigused, saavad luua uusi tõlgitavaid stringe. Soovitame kasutada suletud ja turvatud staging‑keskkonda, kus saate testida oma tootmisrakendust sellise API‑võtmega, lisades enne avalikustamist uusi stringe. See takistab kellegi teie salajast API‑võtit varastamast ja potentsiaalselt teie tõlkeprojekti paisutamast, lisades uusi, mitteseotud stringe.

Kindlasti vaadake meie GitHubi profiilil olevat täielikku näidet. Seal leiate ka näite, kuidas seda teha, kasutades App Router! Kui teil tekib mõni probleem, võtke julgelt ühendust, ja me aitame teid hea meelega.

TacoTranslate võimaldab teie React-rakendusi automaatselt ja kiiresti lokaliseerida enam kui 75 keelde ja tagasi. Alustage juba täna!