Labākais risinājums Next.js lietotņu internacionalizācijai (i18n)

Kā tas darbojas

Pasaule kļūst arvien globalizētāka, tāpēc web izstrādātājiem kļūst arvien svarīgāk veidot lietotnes, kas var 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 apskatī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 lietojumprogrammām, kas izmanto Pages Router.
Ja izmantojat App Router, lūdzu, skatiet šo ceļvedi.

1. solis: Instalējiet i18n bibliotēku

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

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

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

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 bez maksas, un nav nepieciešams pievienot kredītkarti.

TacoTranslate lietotnes saskarnē izveidojiet projektu un dodieties uz tā API atslēgu cilni. Izveidojiet vienu read atslēgu un vienu read/write atslēgu. Mēs tās saglabāsim kā vides mainīgos. Tā read atslēga ir tā, ko mēs saucam par public, savukārt read/write atslēga ir secret. Piemēram, jūs tās varat pievienot .env failam sava projekta saknē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka slepenā read/write API atslēga nekad netiek nopludināta klienta puses ražošanas vidē.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves lokalizācijas kods. Šajā piemērā to iestatīsim uz en, kas apzīmē angļu valodu.
• TACOTRANSLATE_ORIGIN: “mape”, kurā tiks glabātas jūsu teksta virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par origin (izcelsmes vietā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ā atvieglo tā atkārtotu izmantošanu vēlāk. Tagad, izmantojot pielāgotu /pages/_app.tsx, mēs pievienosim TacoTranslate sniedzē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āgoti pageProps un _app.tsx, lūdzu, paplašiniet definīciju ar iepriekš minētajām īpašībām un kodu.

4. solis: Servera puses renderēšanas īstenošana

TacoTranslate ļauj veikt servera puses renderēšanu jūsu tulkojumiem. Tas ievērojami uzlabo lietotāja pieredzi, jo tulkots saturs tiek rādīts uzreiz, nevis sākotnēji īslaicīgi tiek parādīts netulkots saturs. Turklāt mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.

Mēs sāksim, izveidojot vai modificējot /next.config.js.

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

Modificējiet isProduction pārbaudi, lai tā atbilstu jūsu konfigurācijai. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja mēs atrodamies lokālā, testa vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jaunas virknes tiek nosūtītas tulkošanai.

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

Šīs funkcijas pieņem trīs argumentus: vienu Next.js Static Props Context objektu, TacoTranslate konfigurāciju un izvēles 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 kādu 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: Izvietot un testēt!

Mēs esam pabeiguši! Jūsu Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkuras virknes Translate komponentam. Ņemiet vērā, ka tikai vides ar read/write atļaujām API atslēgā varēs izveidot jaunas virknes, ko tulkot. Mēs iesakām izveidot slēgtu un aizsargātu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni ar tādu API atslēgu, pievienojot jaunas virknes pirms publicēšanas. Tas novērsīs, ka ikviens ikviens nozog jūsu slepeno API atslēgu, un potenciāli neuzpūstīs jūsu tulkošanas projektu, pievienojot jaunas, nesaistītas virknes.

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!