Parim lahendus järjepidevuseks (i18n) Next.js rakendustes

Kuidas see töötab

Kuigi maailm muutub üha globaliseeritumaks, on veebiarendajate jaoks üha olulisem luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks peamisi viise selle saavutamiseks on rahvusvahelistumine (i18n), mis võimaldab kohandada rakendust erinevatele keeltele, valuutadele ja kuupäevavormingutele.

Selles õpetuses uurime, kuidas lisada rahvusvahelistumine oma React Next.js rakendusele koos serveripoolse renderdamisega. TL;DR: Vaata kogu 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 raamatukogu

Rahvusvahelistumise 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 sinu tekstid automaatselt igasse keelde, kasutades tipptasemel tehisintellekti, ja vabastab sind JSON-failide aeganõudvast haldamisest.

Paigaldame selle oma terminalis, kasutades npm:

npm install tacotranslate

2. samm: Loo tasuta TacoTranslate konto

Nüüd, kui sul on moodul paigaldatud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API võtmestik. Loo konto siin. See on tasuta ja 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 faili .env.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veendu, et sa ei lekita kunagi salajast read/write API võtit kliendi-poolsetesse tootmiskeskkondadesse.

Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Vaikimisi tagasipöördumise piirkood. Selles näites määrame selle väärtuseks en ehk inglise keel.
• TACOTRANSLATE_ORIGIN: "Kaust", kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siin rohkem päritolude 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ääratleme peagi automaatselt TACOTRANSLATE_API_KEY.

Kliendi loomine eraldi faili teeb selle hilisema uuesti kasutamise 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 ülaltoodud omaduste ja koodiga.

4. samm: Serveripoolse renderdamise rakendamine

TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab kasutajakogemust oluliselt, näidates kohe tõlgitud sisu, selle asemel et esmalt kuvada mittetõlgitud sisu välgatust. Lisaks saame kliendi võrgupäringud vahele jätta, sest 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.

Senini oleme seadistanud Next.js rakenduse ainult toetatud keeltest koosneva nimekirjaga. Järgmine samm on hankida 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 konfiguratsiooni ja valikulisi Next.js omadusi. Pange tähele, et revalidate väärtus getTacoTranslateStaticProps puhul on vaikimisi seatud 60-le, et teie tõlked oleksid ajakohased.

Et kasutada ühte neist funktsioonidest 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 suutma kasutada Translate komponenti, et tõlkida tekste kõigis oma Reacti komponentides.

import {Translate} from 'tacotranslate/react';

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

5. samm: Hõlma ja testi!

Me oleme valmis! Sinu Next.js rakendus tõlgitakse nüüd automaatselt, kui lisad mingeid stringe Translate komponendile. Pane tähele, et ainult keskkonnad, millel on API võtme puhul read/write õigused, saavad luua uusi stringe tõlkimiseks. Soovitame omada suletud ja turvatud eelvaatekeskkonda, kus saad testida oma tootmisrakendust sellise API võtmega, lisades uusi stringe enne live-minekku. See takistab kellelgi sinu salajase API võtme varastamist ja potentsiaalselt su tõlkete projekti paisumist uute, asjasse mittepuutuvate stringide lisamise tõttu.

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!