Parim lahendus rahvusvahelistumiseks (i18n) Next.js rakendustes

Kuidas see töötab

Maailma globaliseerudes muutub veebiarendajate jaoks üha olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistumine (i18n), mis võimaldab kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevade formaatidele.

Selles õpetuses vaatleme, kuidas lisada rahvusvahelistumine sinu 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, vaadake palun selle asemel seda juhendit.

1. samm: Paigalda i18n teek

Rahvusvahelisuse (i18n) rakendamiseks oma Next.js rakenduses valime esmalt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.

TacoTranslate tõlgib teie tekstid automaatselt ükskõik millisesse keelde, kasutades tipptasemel tehisintellekti, ja vabastab teid igavatest JSON-failide haldamisest.

Paigaldame selle terminalis käsklusega npm:

npm install tacotranslate

2. samm: Loo tasuta TacoTranslate konto

Nüüd, kui sul on moodul installitud, on aeg luua oma TacoTranslate konto, tõlketeenus ja sellega seotud API võtmed. Loo konto siin. See on tasuta ning ei nõua krediitkaardi lisamist.

TacoTranslate rakenduse kasutajaliideses loo projekt ja mine selle API võtmete vahekaardile. Loo üks read võti ja üks read/write võti. Salvestame need keskkonnamuutujatena. read võtit kutsume public ja read/write võtit secret. Näiteks võid need lisada oma projekti juurkataloogis asuvasse .env faili.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veenduge, et te ei lekita kunagi saladuses olevat read/write API võtme kliendipoolsetesse tootmiskeskkondadesse.

Lisame veel kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagavarakeele kood. Selles näites määrame selle väärtuseks en, mis tähendab inglise keelt.
• TACOTRANSLATE_ORIGIN: “Kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit rohkem originate kohta.

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

3. samm: TacoTranslate 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;

Me määrame varsti automaatselt TACOTRANSLATE_API_KEY.

Kliendi loomine eraldi failis teeb selle hilisemaks korduvkasutamiseks lihtsamaks. Nüüd lisame kohandatud /pages/_app.tsx abil 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 ülespool mainitud omaduste ja koodiga.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, kuvades kohe tõlgitud sisu, selle asemel et esmalt näidata lühiajaliselt mittetõlgitud sisu. Lisaks saame kliendi poolel vahele jätta võrgu päringud, kuna 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'),
	});
};

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 praeguseni oleme seadistanud Next.js rakenduse ainult toetatud keelte nimekirjaga. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutate vastavalt oma vajadustele kas getTacoTranslateStaticProps või getTacoTranslateServerSideProps.

Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, TacoTranslate konfiguratsiooni ja valikulisi Next.js omadusi. Pane tähele, et revalidate on getTacoTranslateStaticProps puhul vaikimisi seatud väärtusele 60, et sinu tõlked püsiksid ajakohased.

Et kasutada kumbagi funktsiooni lehel, oletame, et sul on lehe fail 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 suutma kasutada Translate komponenti kõigi oma Reacti komponentide stringide tõlkimiseks.

import {Translate} from 'tacotranslate/react';

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

Samm 5: Loo 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 read/write õigused API-võtmel, saavad luua uusi tõlgitavaid stringe. Soovitame kasutada suletud ja turvalist testkeskkonda, kus saate oma tootmisrakendust testida sellise API-võtmega, lisades uusi stringe enne avalikustamist. See takistab kellelgi varastamast teie salajast API-võtit ning võimaliku tõlkeprojekti paisutamise uute, mitteseotud stringide lisamisega.

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!