Parim lahendus Next.js-rakenduste rahvusvahelistamiseks (i18n)

Kuidas see töötab

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

Selles juhendis uurime, kuidas lisada internatsionaliseerimist teie React Next.js rakendusse koos serveripoolse renderdamisega. TL;DR: Vaadake 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

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

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

Paigaldame selle terminalis, kasutades npm:

npm install tacotranslate

2. samm: 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. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses looge projekt ja minge selle API-võtmete vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. Me nimetame read võtme public ja read/write võtme secret. Näiteks võite need lisada projekti juurkausta faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ära kunagi avalikusta salajast read/write API-võtit kliendipoolsetes tootmiskeskkondades.

Lisame ka kaks täiendavat keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

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

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

Samm 3: TacoTranslate'i seadistamine

TacoTranslate'i integreerimiseks oma rakendusega peate looma kliendi, kasutades varem 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;

Peagi määrame TACOTRANSLATE_API_KEY automaatselt.

Kliendi loomine eraldi faili muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd lisame kohandatud /pages/_app.tsx abil 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.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, kuvades tõlgitud sisu kohe, selle asemel et esmalt ilmuks lühikeseks ajaks tõlkimata sisu. Lisaks võime kliendipoolseid 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 kontrolli vastavalt oma seadistusele. Kui true, kuvab TacoTranslate avaliku API-võtme. 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.

Siiani oleme Next.js rakenduse seadistanud ainult toetatud keelte loendiga. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutate vastavalt oma nõuetele kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps.

Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, TacoTranslate'i konfiguratsiooni ja valikulised Next.js omadused. Pange tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtusele 60, nii et teie tõlked püsiksid 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 kõigi teie React-komponentides olevate stringide tõlkimiseks.

import {Translate} from 'tacotranslate/react';

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

5. samm: Juuruta ja testi!

Oleme valmis! Teie Next.js rakendus tõlgitakse nüüd automaatselt, kui lisate mõne stringi komponenti Translate. Pange tähele, et ainult keskkonnad, kus API‑võtmel on read/write õigused, saavad luua uusi tõlgitavaid stringe. Soovitame kasutada suletud ja turvatud staging‑keskkonda, kus saate oma tootmisrakendust sellise API‑võtmega testida ning lisada uusi stringe enne avalikustamist. See hoiab ära, et keegi ei varastaks teie salajast API‑võtit ning ei paisutaks teie tõlkeprojekti, lisades uusi, asjasse mittepuutuvaid stringe.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!