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

Pasaule kļūst arvien globalizētāka, un web izstrādātājiem ir kļūst arvien 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ā apmācībā mēs izpētī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 savā Next.js lietotnē, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Tomēr šajā piemēra mēs izmantosim TacoTranslate.

TacoTranslate automātiski pārtulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošās 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 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 bez maksas, un nav nepieciešams pievienot kredītkarti.

TacoTranslate lietotnes saskarnē izveidojiet projektu un pārejiet 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 varat tās pievienot .env failam savas projekta saknes mapē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pārliecinieties, ka nekad neatklājat slepeno read/write API atslēgu 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ā mēs to iestatīsim kā 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

Lai integrētu TacoTranslate ar jūsu lietotni, jums būs jāizveido klients, izmantojot iepriekš iegū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 lietojamu atkārtoti vēlāk. Tagad, izmantojot pielāgotu /pages/_app.tsx, mēs pievienosim TacoTranslate pakalpojumu 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 ieviešana

TacoTranslate ļauj veikt jūsu tulkojumu servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, nekavējoties parādot tulkotu saturu, nevis vispirms rādīt ātru netulkota satura mirkli. Papildus tam 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 atbilstoši jūsu iestatījumam. Ja true, TacoTranslate izmantos publisko API atslēgu. Ja esam lokālā, testa vai starpposma vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jauni teksti tiek nosūtīti tulkošanai.

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

Šīm funkcijām ir trīs argumenti: viens Next.js Static Props Context objekts, TacoTranslate konfigurācija 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 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: Izvietojiet un pārbaudiet!

Mēs esam pabeiguši! Jūsu React lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes Translate komponentam. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām uz API atslēgas varēs radīt jaunas virknes tulkošanai. Mēs iesakām izveidot slēgtu un drošu testa vidi, kurā varat pārbaudīt savu produkcijas lietotni ar šādu API atslēgu, pievienojot jaunas virknes pirms palaišanas tiešraidē. Tas novērsīs, ka kāds nozog jūsu slepeno API atslēgu un potenciāli neaizpeld jūsu tulkošanas projektu ar jaunām, nesaistītām virknēm.

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

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