Kuidas rakendada rahvusvahelistamist 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 uurime, kuidas lisada rahvusvahelistamist teie React Next.js rakendusse serveripoolse renderdamisega. TL;DR: Vaata täielikku näidet siit.

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

Samm 1: Paigaldage i18n-teek

Et rakendada oma Next.js-rakenduses rahvusvahelistamist (i18n), valime esmalt i18n-teegi. On mitu populaarset teeki, sealhulgas next-intl. Siiski kasutame selles näites TacoTranslate.

TacoTranslate tõlgib teie tekstid automaatselt mistahes keelde, kasutades tipptasemel tehisintellekti, 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 oled mooduli installinud, on aeg luua oma TacoTranslate'i konto, tõlkeprojekt ja sellega seotud API-võtmed. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja ava selle API‑võtmete vahekaart. 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 need lisada oma projekti juurkausta faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Lisame ka 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. Lisateavet originite kohta leiate 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 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 peagi automaatselt.

Kliendi eraldi faili loomine 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, palun täiendage definitsiooni ülaltoodud omaduste ja koodiga.

4. samm: 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 tõlkimata sisu. Lisaks saame kliendipoolsed võrgu päringud 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 vastavaks oma seadistusele. Kui true, kuvab TacoTranslate avaliku API-võtme. Kui me oleme kohalikus, test- või staging-keskkonnas (isProduction is false), kasutame salajast read/write API-võtit, et tagada, et uued stringid saadetakse tõlkimiseks.

Senini oleme Next.js rakenduse seadistanud ainult toetatud keelte nimekirjaga. Järgmiseks hangime 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 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.

Selleks, et 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 peaksite saama kasutada Translate komponenti kõigi oma React-komponentide stringide tõlkimiseks.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Juuruta ja testi!

Oleme valmis! Teie Reacti rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate komponenti. Pange tähele, et ainult keskkonnad, millel on read/write õigused API‑võtmel, 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, et keegi keegi varastaks teie salajast API‑võtit ning potentsiaalselt paisutaks teie tõlkeprojekti, lisades uusi, mitteseotud stringe.

Kindlasti vaata meie GitHubi profiilis olevat täielikku näidet. Seal leiad ka näite, kuidas seda teha kasutades App Router! Kui tekib mingeid probleeme, võta julgelt ühendust ja me aitame hea meelega.

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