Parim lahendus Next.js-rakenduste rahvusvahelistamiseks (i18n)

Kuidas see töötab

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

Selles juhendis uurime, kuidas lisada teie React Next.js rakendusse rahvusvahelistamist serveripoolse renderdamise abil. TL;DR: Vaadake kogu näidet siin.

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 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 mis tahes keelde tipptasemel tehisintellekti abil ning vabastab teid JSON-failide tüütust haldamisest.

Paigaldame selle terminalis kasutades npm:

npm install tacotranslate

Samm 2: Loo tasuta TacoTranslate'i konto

Nüüd, kui olete mooduli paigaldanud, on aeg luua oma TacoTranslate'i konto, tõlkimisprojekt ja sellega seotud API-võtmed. Loo konto siit. See on tasuta ja krediitkaardi lisamine ei ole vajalik.

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 ja read/write võtit 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.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagastuskeele kood. Selles näites määrame selle väärtuseks en (inglise keel).
• TACOTRANSLATE_ORIGIN: „kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit rohkem päritolude kohta.

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

3. samm: TacoTranslate'i seadistamine

Et integreerida TacoTranslate'i oma rakendusega, peate looma kliendi, kasutades eelnevalt mainitud 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 faili 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, siis palun laiendage definitsiooni ülaltoodud omaduste ja koodiga.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab oluliselt kasutajakogemust, sest tõlgitud sisu kuvatakse kohe, selle asemel et esmalt näidata lühikest sähvatust tõlkimata 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'),
	});
};

Kohanda isProduction kontroll 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.

Senini oleme seadistanud Next.js-i rakenduse ainult toetatud keelte loendiga. Järgmisena hangime tõlked kõigile teie lehtedele. Selleks kasutate kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps, sõltuvalt teie vajadustest.

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 juures on revalidate vaikimisi seatud väärtuseks 60, nii et teie tõlked püsivad ajakohased.

Et kasutada üht või teist 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 kõigi oma React-komponentide 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 mis tahes stringe Translate komponendile. Pange tähele, et ainult keskkonnad, mille API-võtmel on read/write õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame omada suletud ja turvatud staging-keskkonda, kus saate sellise API-võtmega testida oma tootmisrakendust ning lisada enne avalikustamist uusi stringe. See hoiab ära, et keegi saaks varastada teie salajast API-võtit ja potentsiaalselt paisutada 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!