Kā īstenot internacionalizāciju Next.js lietotnē, kas izmanto Pages Router

Pasaules globalizācijas dēļ tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietotnes, kas spēj apkalpot 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 datumu formātiem.

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

Šis ceļvedis ir paredzēts Next.js lietojumprogrammā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ē ieviestu internacionalizāciju (i18n), vispirms izvēlēsimies i18n bibliotēku. Pastāv 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 tekstus uz jebkuru valodu, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no laikietilpīgas JSON failu pārvaldības.

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

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad esat instalējis moduli, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bezmaksas, 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. 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 jūsu projekta saknē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka nekad neizpaužat 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 lokalizācijas kods. Šajā piemērā to iestatīsim uz en (angļu).
• TACOTRANSLATE_ORIGIN: “mape”, kur tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Uzziniet vairāk par origin š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š minē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 izveidošana atsevišķā failā padara to vieglāk izmantot 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āgotas pageProps un _app.tsx, lūdzu, paplašiniet definīciju ar iepriekš minētajām īpašībām un kodu.

4. solis: Serverpuses renderēšanas īstenošana

TacoTranslate ļauj veikt jūsu tulkojumu servera puses renderēšanu. Tas ievērojami uzlabo lietotāja pieredzi — pārtulkots saturs tiek rādīts nekavējoties, nevis vispirms parādās īslaicīgs neaiztulkota satura mirklis. Papildus tam 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'),
	});
};

Pielāgojiet isProduction pārbaudi, lai tā atbilstu jūsu iestatījumiem. 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 nodrošinātu, ka jaunās virknes tiek nosūtītas tulkošanai.

Līdz šim mēs esam iestatījuši Next.js lietotni tikai ar atbalstīto valodu sarakstu. Nākamais solis — iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, pēc jūsu vajadzībām izmantojiet 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 atjaunināti.

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 būt iespējai izmantot Translate komponentu, lai tulkotu teksta virknes visos jūsu React komponentos.

import {Translate} from 'tacotranslate/react';

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

5. solis: Izvietojiet un pārbaudiet!

Gatavs! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes Translate komponentā. Ņemiet vērā, ka tikai vidēs, kur API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas virknes tulkošanai. Mēs iesakām izveidot slēgtu un drošu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni, izmantojot šādu API atslēgu un pievienot jaunus tekstus pirms palaišanas. Tas novērsīs, ka ikviens ikviens nozog jūsu slepeno API atslēgu, un potenciāli uzpūst jūsu tulkošanas projektu, pievienojot jaunas, nesaistītas virknes.

Noteikti apskatiet pilno piemēru mūsu GitHub profilā: apskatīt pilno piemēru. Tur jūs arī atradīsiet piemēru, kā to izdarīt, izmantojot App Router! Ja sastopaties ar jebkādām problēmām, droši sazinieties, un mēs ar prieku palīdzēsim.

TacoTranslate ļauj jums automātiski lokalizēt jūsu React lietotnes ātri uz vairāk nekā 75 valodām un no tām. Sāciet jau šodien!