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

Kā pasaule kļūst arvien globalizētāka, tīmekļa izstrādātājiem ir aizvien svarīgāk veidot lietotnes, kas var apkalpot lietotājus no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to sasniegt, 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: Pilnu piemēru skatiet šeit.

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

1. solis: Instalējiet i18n bibliotēku

Lai ieviestu 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 tulko jūsu tekstus uz jebkuru valodu, izmantojot modernu mākslīgo intelektu, atbrīvojot jūs no apgrūtinošas JSON failu pārvaldības.

Uzstādīsim to, izmantojot npm jūsu terminālī:

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad jums ir instalēts modulis, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītos API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas un nepieprasa ievadīt kredītkarti.

TacoTranslate lietotāja 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ēgu saucam par public, bet read/write atslēgu par secret. Piemēram, jūs tās varat pievienot .env failam jūsu projekta saknes mapē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinies, ka nekad neatklāj slepeno read/write API atslēgu klienta puses ražošanas vidēs.

Mēs arī pievienosim vēl divus vidi 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ātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par izcelsmi šeit.

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

3. solis: TacoTranslate iestatīšana

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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īz automātiski definēsim TACOTRANSLATE_API_KEY.

Klienta izveide atsevišķā failā padara to vieglāk lietojamu vēlāk. 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ā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 būtiski uzlabo lietotāja pieredzi, uzreiz parādot tulkoto saturu, nevis vispirms mirkšķinot neiztulkotu saturu. Turklāt mēs varam izvairīties no tīkla pieprasījumiem 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 iestatījumam. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja atrodamies lokālā, testa vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai pārliecinātos, ka tulkošanai tiek nosūtītas jaunas virknes.

Līdz šim mēs esam iestatījuši Next.js lietojumprogrammu tikai ar atbalstīto valodu sarakstu. Nākamā lieta, ko mēs darīsim, ir iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, izmantosiet getTacoTranslateStaticProps vai getTacoTranslateServerSideProps , pamatojoties uz savām prasībām.

Šīm funkcijām ir nepieciešami trīs argumenti: viens Next.js Static Props Context objekts, TacoTranslate konfigurācija un neobligātie Next.js rekvizīti. Ņemiet vērā, ka revalidate getTacoTranslateStaticProps pēc noklusējuma ir iestatīta uz 60, lai tulkojumi būtu atjaunināti.

Lai lapā izmantotu kādu no funkcijām, 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 visos jūsu React komponentos.

import {Translate} from 'tacotranslate/react';

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

5. solis: Publicē un pārbaudi!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosit jebkādus tekstus Translate komponentam. Ņemiet vērā, ka tikai vidi ar read/write atļaujām API atslēgā varēs izveidot jaunus tekstus tulkošanai. Mēs iesakām izveidot slēgtu un drošu testēšanas vidi, kurā varat pārbaudīt savu ražošanas lietotni ar tādu API atslēgu, pievienojot jaunus tekstus pirms palaišanas. Tas novērsīs, ka kāds zagtu jūsu slepeno API atslēgu un potenciāli pievienotu jaunas, ar projektu nesaistītas teksta rindas, kas varētu palielināt jūsu tulkošanas projektu.

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

TacoTranslate ļauj jums automātiski lokalizēt savas React lietotnes ātri uz jebkuru valodu un no tās. Sāciet jau šodien!