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

Kā pasaule kļūst arvien globalizētāka, arvien svarīgāk ir, lai tīmekļa izstrādātāji veidotu lietotnes, kas spēj apkalpot lietotājus no dažādām valstīm un kultūrām. Viena no galvenajām pieejām, 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 aplūkosim, kā pievienot internacionalizāciju jūsu React Next.js lietotnei, izmantojot servera puses renderēšanu. TL;DR: Pilnu piemēru skatiet šeit.

Šis ceļvedis ir paredzē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 ī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 virknes uz jebkuru valodu, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldīšanas.

Uzstādīsim to, izmantojot npm jūsu 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 ar tiem saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav jāievada kredītkarte.

TacoTranslate lietotnes lietotāja saskarnē izveidojiet projektu un atveriet tā API atslēgu cilni. Izveidojiet vienu read atslēgu un vienu read/write atslēgu. Mēs tos saglabāsim kā vides mainīgos. read atslēgu mēs saucam par public, bet read/write atslēgu — par secret. Piemēram, jūs varat pievienot tās .env failam jūsu 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 klientpuses ražošanas vidēs.

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 valodai.
• TACOTRANSLATE_ORIGIN: “mape”, kur tiks glabāti jūsu teksti, 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š 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 to vieglāk izmantot vēlāk. Tagad, izmantojot pielāgotu /pages/_app.tsx, mēs pievienosim TacoTranslate provideri.

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: Servera puses renderēšanas īstenošana

TacoTranslate atbalsta tulkojumu renderēšanu servera pusē. Tas ievērojami uzlabo lietotāja pieredzi, jo tulkots saturs tiek parādīts uzreiz, nevis sākumā īslaicīgi parādās netulkots saturs. Papildus tam mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.

Sāksim ar /next.config.js izveidi 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'),
	});
};

Pielāgojiet isProduction pārbaudi atbilstoši savai 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 jaunie teksti tiek nosūtīti tulkošanai.

Līdz šim mēs Next.js lietotni esam konfigurējuši tikai 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 būt iespējai izmantot Translate komponentu, lai tulkotu virknes visās jūsu React komponentēs.

import {Translate} from 'tacotranslate/react';

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

5. solis: Izvietojiet un pārbaudiet!

Viss ir 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ām API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas virknes, kuras tiks tulkotas. Mēs iesakām izveidot slēgtu un aizsargātu staging vidi, kurā varat pārbaudīt savu produkcijas lietotni ar šādu API atslēgu, pievienojot jaunas virknes pirms palaišanas. Tas novērsīs jūsu slepenās API atslēgas nozagšanu un potenciālu jūsu tulkošanas projekta piepildīšanu ar jauniem, nesaistītiem ierakstiem.

Noteikti apskatiet pilno piemēru mūsu GitHub profilā. Tur jūs atradīsiet arī piemēru, kā to izdarīt, izmantojot App Router! Ja rodas kādas problēmas, droši sazinieties, un mēs labprāt jums palīdzēsim.

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