Parim lahendus rahvusvahelistamiseks (i18n) Next.js rakendustes

Kuidas see töötab

Maailma globaliseerudes muutub veebiarendajate jaoks järjest olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistumise (i18n) rakendamine, mis võimaldab kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles õpetuses vaatleme, kuidas lisada rahvusvahelistumine teie React Next.js rakendusse koos serveripoolselt renderdamisega. TL;DR: Vaadake täielikku näidet siin.

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

1. samm: Paigalda i18n teek

Rakenduse Next.js rahvusvahelistamiseks valime esmalt i18n teegi. On mitu populaarset teeki, sealhulgas next-intl. Siiski kasutame selles näites TacoTranslate.

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

Paigaldame selle oma terminalis abil 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 siin. See on tasuta ning ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu selle API keys vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtit nimetame public ja read/write võti on secret. Näiteks võid need lisada oma projekti juurkausta olevasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veenduge, et salajast read/write API võtit ei lekiks kunagi kliendipoolsetesse tootmiskeskkondadesse.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagasilangetava keeleseadistus. 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 siin lähemalt originaalide kohta.

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

3. samm: TacoTranslate seadistamine

TacoTranslate'i integreerimiseks 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;

Me määratleme peagi automaatselt TACOTRANSLATE_API_KEY-i.

Kliendi loomine eraldi faili teeb selle hilisema uuesti kasutamise lihtsamaks. Nüüd, kasutades kohandatud faili /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 sul on juba kohandatud pageProps ja _app.tsx, siis palun laienda definitsiooni ülalkirjeldatud omaduste ja koodiga.

Samm 4: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust märkimisväärselt, näidates kohe tõlgitud sisu, mitte esmalt lühikest hetke tõlkimata sisu. Lisaks saame kliendipoolseid võrgupäringuid vältida, kuna meil on juba kõik vajalikud tõlked olemas.

Alustame /next.config.js faili 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'),
	});
};

Muutke isProduction kontrolli vastavalt oma seadistusele. Kui true, toob TacoTranslate välja avaliku API võtme. Kui oleme kohalikus, test- või lavastuskeskkonnas (isProduction is false), kasutame salajase read/write API-võtit, et veenduda, et uued stringid saadetakse tõlkimiseks.

Kuni nüüd oleme seadistanud Next.js rakenduse ainult toetatud keelte nimekirjaga. Järgmiseks võtame kõikide sinu lehtede tõlked. Selleks kasutad kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps vastavalt oma 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, et teie tõlked oleksid ajakohased.

Kui soovite kasutada ühte neist funktsioonidest lehel, oletame, et teil on lehefail selline 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 komponenti Translate kõigi oma Reacti komponentide tekstide tõlkimiseks.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Juhtesta ja testi!

Oleme valmis! Teie Next.js rakendus tõlgitakse nüüd automaatselt, kui lisate Translate komponendile mõne teksti. Pange tähele, et ainult keskkonnad, millel on API võtme puhul read/write õigused, saavad luua uusi tõlgitavaid tekste. Soovitame kasutada suletud ja turvalist katsekeskkonda, kus saate oma tootmisrakendust sellise API võtmega testida ning lisada uusi tekste enne avalikku väljaandmist. See hoiab ära teie salajase API võtme varguse ja takistab tõlk projektide liigset paisumist, lisades uusi, mitteseotud tekste.

Veendu, et kontrolliksid täielikku näidet meie GitHubi profiilis. Seal leiad ka näite, kuidas seda teha kasutades App Router! Kui tekib mingeid probleeme, ära kõhkle meiega ühendust võtmast, ja me oleme rõõmuga valmis aitama.

TacoTranslate võimaldab sul automaatselt lokaliseerida oma Reacti rakendusi kiiresti ükskõik millisesse keelde ja keelelt. Alusta juba täna!