Labākais risinājums internacionalizācijai (i18n) Next.js lietotnēm

Kā tas darbojas

Pasaule kļūst arvien globalizētāka, tāpēc tīmekļa izstrādātājiem ir arvien svarīgāk izveidot lietotnes, kas spēj apmierināt lietotājus no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to panākt, ir internacionalizācija (i18n), kas ļauj pielāgot jūsu lietotni dažādām valodām, valūtām un datuma formātiem.

Šajā pamācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietotnei ar servera puses renderēšanu. TL;DR: Skatiet pilnu piemēru šeit.

Šis ceļvedis ir domāts Next.js lietotnēm, kas izmanto Pages Router.
Ja izmantojat App Router, lūdzu, skatiet šo ceļvedi tā vietā.

1. solis: Instalējiet i18n bibliotēku

Lai jūsu Next.js lietotnē īstenotu internacionalizāciju, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Taču šajā piemērā mēs izmantosim TacoTranslate.

TacoTranslate automātiski tulko jūsu tekstus jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldīšanas.

Instalēsim to savā terminālī, izmantojot npm:

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad modulis ir instalēts, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bezmaksas, un nepieprasa kredītkartes pievienošanu.

TacoTranslate lietotnes lietotāja interfeisā izveidojiet projektu un pārejiet uz tā cilni API keys. Izveidojiet vienu read atslēgu un vienu read/write atslēgu. Mēs tās saglabāsim kā vides mainīgos. read atslēga ir tā, ko mēs saucam par public, un read/write atslēga ir secret. Piemēram, jūs varētu pievienot tās .env failam projekta saknē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka nekad neatklājiet slepeno read/write API atslēgu klienta puses ražošanas vidēm.

Mēs arī pievienosim vēl divus vides mainīgos: TACOTRANSLATE_DEFAULT_LOCALE un TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves (fallback) lokāles kods. Šajā piemērā to iestatīsim uz en — angļu valodai.
• TACOTRANSLATE_ORIGIN: “mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par izcelsmēm šeit.

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

3. solis: TacoTranslate iestatīšana

Lai integrētu TacoTranslate savā lietotnē, jums būs jāizveido klients, izmantojot iepriekš norādītās API atslēgas. Piemēram, izveidojiet failu ar nosaukumu /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ēs drīzumā automātiski definēsim TACOTRANSLATE_API_KEY.

Klienta izveide atsevišķā failā padara tā atkārtotu izmantošanu vēlāk vieglāku. Tagad, izmantojot pielāgotu /pages/_app.tsx, mēs pievienosim TacoTranslate nodrošinātāju.

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>
	);
}

Ja jums jau ir pielāgotas pageProps un _app.tsx, lūdzu, paplašiniet definīciju ar iepriekš norādītajām īpašībām un kodu.

4. solis: Servera puses renderēšanas ieviešana

TacoTranslate nodrošina jūsu tulkojumu servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, jo tulkots saturs tiek rādīts uzreiz, nevis vispirms parādās nepārtulkots satura uzplaiksnījums. Turklāt klienta pusē varam izlaist tīkla pieprasījumus, jo mums jau ir visi nepieciešamie tulkojumi.

Sāksim ar /next.config.js izveidošanu vai modificēšanu.

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'),
	});
};

Mainiet isProduction pārbaudi atbilstoši savai konfigurācijai. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testēšanas vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai pārliecinātos, ka jaunās virknes tiek nosūtītas tulkošanai.

Līdz šim mēs tikai iestatījām Next.js lietotni ar atbalstīto valodu sarakstu. Nākamais solis ir iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, atkarībā no jūsu prasībām izmantosiet vai nu getTacoTranslateStaticProps, vai getTacoTranslateServerSideProps.

Šīs funkcijas pieņem trīs argumentus: vienu Next.js Static Props Context objektu, TacoTranslate konfigurāciju un neobligātas Next.js īpašības. Ņemiet vērā, ka revalidate uz getTacoTranslateStaticProps pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi būtu aktuāli.

Lai izmantotu jebkuru no šīm funkcijām lapā, pieņemsim, ka jums ir lapas fails, piemēram, /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!"/>;
}

Tagad jums vajadzētu varēt izmantot Translate komponentu, lai tulkotu tekstus visos jūsu React komponentos.

import {Translate} from 'tacotranslate/react';

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

5. solis: Izvietojiet un pārbaudiet!

Viss gatavs! Jūsu Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes komponentam Translate. Ņemiet vērā, ka tikai vidēs, kurām API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas teksta virknes, kas tiks tulkotas. Iesakām izmantot slēgtu un aizsargātu staging vidi, kurā varat testēt savu produkcijas lietotni ar šādu API atslēgu un pievienot jaunas virknes pirms izvietošanas ražošanā. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs iespēju, ka kāds pievieno jaunus, nesaistītus ierakstus, kas varētu uzpūst jūsu tulkojumu projektu.

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!