Kuidas rakendada rahvusvahelistamist Next.js-i rakenduses, mis kasutab Pages Router

Maailma globaliseerudes on üha olulisem, et veebiarendajad loovad rakendusi, mis suudavad teenindada erinevate riikide ja kultuuride kasutajaid. Ü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 serveripoolse renderdamise abil. TL;DR: Vaata täielikku näidet siin.

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

Samm 1: Installige i18n-teek

Next.js rakenduses rahvusvahelistumise rakendamiseks valime esmalt i18n-raamistiku. On mitu populaarset raamistiku, sealhulgas next-intl. Siiski selles näites kasutame TacoTranslate.

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

Paigaldame selle terminalis, kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate'i konto

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

TacoTranslate'i 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. Näiteks võid need lisada faili .env oma projekti juurkausta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veendu, et sa ei avalikustaks kunagi salajast read/write API-võtit kliendipoolsetes tootmiskeskkondades.

Lisame ka veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varulokaali kood. Selles näites seadistame selle väärtuseks en, mis tähistab inglise keelt.
• TACOTRANSLATE_ORIGIN: “kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originite kohta lähemalt siit.

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

Samm 3: TacoTranslate'i seadistamine

TacoTranslate integreerimiseks oma rakendusse peate looma kliendi, kasutades eespool 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 failis muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd, kasutades kohandatud /pages/_app.tsx, lisame 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 teil on juba kohandatud pageProps ja _app.tsx, siis palun laiendage definitsiooni ülaltoodud omaduste ja koodiga.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, kuvades tõlgitud sisu koheselt, selle asemel et esmalt kuvada lühidalt tõlkimata sisu. Lisaks saame kliendipoolsel küljel võrgupäringuid vahele jätta, kuna meil on juba olemas kõik vajalikud tõlked.

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 kontroll vastavaks oma seadistusele. Kui true, toob TacoTranslate avaliku API-võtme esile. Kui oleme lokaalses, test- või staging-keskkonnas (isProduction is false), kasutame salajast read/write API-võtit, et tagada uute stringide saatmine tõlkimiseks.

Senini oleme Next.js rakenduse seadistanud vaid toetatud keelte loendiga. Järgmiseks hangime tõlked kõigile teie lehtedele. Selleks kasutate vastavalt oma nõudmistele kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps.

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

Kui soovite kumbagi funktsiooni lehel kasutada, oletame, et teil on lehefail näiteks /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 peaksid sa saama kasutada Translate komponenti, et tõlkida stringe kõigis oma Reacti komponentides.

import {Translate} from 'tacotranslate/react';

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

5. samm: Juuruta ja testi!

Oleme 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õtmele read/write õigused, saavad luua uusi tõlgitavaid stringe. Soovitame omada suletud ja turvalist staging-keskkonda, kus saate oma tootmisrakendust sellelaadse API-võtmega testida ning lisada uusi stringe enne avalikku käivitamist. See takistab, et keegi keegi varastaks teie salajast API-võtit ja potentsiaalselt paisutaks teie tõlkeprojekti, lisades uusi mitteseotud stringe.

Kindlasti vaata meie GitHubi profiilil üle täielikku näidet. Sealt leiad ka näite, kuidas seda teha, kasutades App Router ! Kui sul tekib mõni probleem, võta julgelt ühendust ja me aitame hea meelega.

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