Parim lahendus Next.js‑i rakenduste rahvusvahelistamiseks (i18n)

Kuidas see töötab

Maailma globaliseerudes muutub üha olulisemaks, et veebiarendajad loovad rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi võimalusi selleks on rahvusvahelistamine (i18n), mis võimaldab kohandada rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles õpetuses uurime, kuidas lisada rahvusvahelistamist oma React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaata täielikku näidet siit.

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

1. samm: Paigaldage i18n-teek

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

TacoTranslate tõlgib teie stringid automaatselt ükskõik millesse keelde tipptasemel tehisintellekti abil ning vabastab teid tüütu JSON-failide haldamise eest.

Paigaldame selle terminalis, kasutades npm:

npm install tacotranslate

2. samm: Looge tasuta TacoTranslate'i konto

Nüüd, kui sul on moodul installitud, on aeg luua oma TacoTranslate 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 nimetame public, ning read/write võtit nimetame secret. Näiteks võid need lisada projekti juurkausta asuvasse faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Lisame ka veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi varukeele kood. Selles näites seadistame selle väärtuseks en inglise keele jaoks.
• TACOTRANSLATE_ORIGIN: "kaust", kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe originitest 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 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;

Varsti määrame TACOTRANSLATE_API_KEY automaatselt.

Kliendi loomine eraldi faili 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 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 näidata lühiajaliselt tõlkimata sisu. Lisaks saame kliendipoolseid võrgu pä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, teeb TacoTranslate avaliku API-võtme kättesaadavaks. Kui oleme lokaalses, test- või staging-keskkonnas (isProduction is false), kasutame salajast read/write API-võtit, et tagada, et uued stringid saadetakse tõlkimiseks.

Siiani oleme Next.js-rakenduse seadistanud ainult toetatud keelte nimekirjaga. Järgmisena hangime tõlked kõigile teie lehtedele. Selleks kasutate vastavalt teie vajadustele 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 getTacoTranslateStaticProps puhul on revalidate vaikimisi seatud 60-ks, nii et teie tõlked jäävad ajakohasteks.

Et kasutada kummatki funktsiooni lehel, 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õiki oma Reacti komponentides olevaid stringe.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Juuruta ja testi!

Oleme valmis! Teie Next.js-rakendus tõlgitakse nüüd automaatselt, kui lisate mis tahes stringe Translate komponendile. Pange tähele, et ainult keskkonnad, millel on API‑võtmel read/write õigused, saavad luua uusi tõlgitavaid stringe. Soovitame omada suletud ja turvalist staging‑keskkonda, kus saate testida oma tootmisrakendust sellise API‑võtmega, lisades enne avalikustamist uusi stringe. See hoiab ära, et keegi keegi varastaks teie salajast API‑võtit ja potentsiaalselt paisutaks teie tõlkeprojekti, lisades uusi, mitteseotud 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!