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

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

Selles juhendis uurime, kuidas lisada teie React Next.js rakendusele internacionaliseerimine koos serveripoolse renderdamisega. TL;DR: Vaata kogu 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: Paigaldage i18n-raamatukogu

Et lisada i18n-tugi oma Next.js rakendusse, valime esmalt i18n-teegi. On mitu populaarset teeki, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.

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

Paigaldame selle oma terminalis, kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate'i konto

Nüüd, kui olete mooduli installinud, on aeg luua oma TacoTranslate'i 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 kutsume public, ja read/write võtit kutsume secret. Näiteks võid need lisada projekti juurkausta faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veendu, et salajane read/write API-võti ei lekiks kunagi kliendipoolsesse tootmiskeskkonda.

Lisaks lisame veel 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 originitest lähemalt siit.

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

Samm 3: TacoTranslate'i seadistamine

Et integreerida TacoTranslate oma rakendusega, peate looma kliendi, kasutades varasemaid 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;

Määrame TACOTRANSLATE_API_KEY varsti automaatselt.

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 sul on juba kohandatud pageProps ja _app.tsx, siis palun laienda definitsiooni eespool toodud omaduste ja koodiga.

Samm 4: Serveri poole renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, kuvades tõlgitud sisu kohe, selle asemel et esmalt näidata lühikest vilkumist mittetõlgitud sisust. Lisaks saame kliendipoolseid võrgupäringuid vahele jätta, sest 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, 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 Next.js-rakenduse seadistanud ainult toetatud keelte loendiga. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutate 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 omadusi. Pange tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtuseks 60, nii et teie tõlked püsivad ajakohased.

Kumbagi funktsiooni lehel kasutamiseks 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!"/>
}

5. samm: Rullesta 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õtmel read/write õigused, saavad luua uusi tõlgitavaid stringe. Soovitame omada suletud ja turvatud staging‑keskkonda, kus saate testida oma tootmisrakendust sellise API‑võtmega ning lisada uusi stringe enne avalikustamist. See hoiab ära teie salajase API‑võtme varastamise ning väldib tõlkeprojekti paisutamist uute, mitteseotud stringidega.

Vaadake kindlasti meie GitHubi profiilil olevat täielikku näidet. Seal leiate ka näite, kuidas seda teha, kasutades App Router! Kui tekib mingeid probleeme, võtke julgelt ühendust, me aitame hea meelega.

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