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

Kad pasaule kļūst arvien globalizētāka, ir kļūst arvien svarīgāk tīmekļa izstrādātājiem 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 lokalizā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 lokalizā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 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 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ērā mēs izmantosim TacoTranslate.

TacoTranslate automātiski pārtulko jūsu virknes uz jebkuru valodu, izmantojot jaunākās paaudzes mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.

Instalēsim to, izmantojot npm jūsu terminālā:

npm install tacotranslate

2. solis: Izveido 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 lietojumprogrammas UI ietvaros 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 un read/write atslēgu par secret. Piemēram, tos var pievienot .env failam sava 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ēs.

Mēs arī pievienosim vēl divas vides mainīgās: TACOTRANSLATE_DEFAULT_LOCALE un TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves lokalizācijas kods. Šajā piemērā mēs 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 izcelsmēm š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 tā atkārtotu izmantošanu vēlāk vieglāku. Tagad, izmantojot pielāgoto /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 īstenošana

TacoTranslate ļauj veikt jūsu tulkojumu servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi, nekavējoties parādot tulkoto saturu, nevis vispirms rādot neiztulkotu saturu. Turklāt mēs varam izlaist tīkla pieprasījumus klientā, jo mums jau ir visas nepieciešamās tulkojumu versijas.

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 atrodamies lokālā, testēšanas vai sagatavošanas vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu jaunu tekstu nosūtīšanu tulkošanai.

Līdz šim mēs esam tikai iestatījuši Next.js lietotni ar atbalstīto valodu sarakstu. Nākamais, ko darīsim, 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 saņem trīs argumentus: vienu Next.js Static Props Context objektu, konfigurāciju TacoTranslate un izvēlē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 kādu no funkcijām lapā, pieņemsim, ka jums ir lapas fails kā /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 komponentā. Ņemiet vērā, ka tikai vidi, kurām API atslēgai ir read/write atļaujas, varēs izveidot jaunas virknes tulkošanai. Mēs iesakām izmantot slēgtu un aizsargātu testēšanas vidi, kurā varat pārbaudīt savu ražošanas lietotni ar šādu API atslēgu, pievienojot jaunas virknes pirms palaišanas. Tas novērsīs jebkura mēģinājumu nozagt jūsu slepeno API atslēgu un potenciāli pārslogot jūsu tulkošanas projektu, pievienojot jaunas, nesaistītas virknes.

Noteikti apskati pilnu piemēru mūsu GitHub profilā. Tur tu atradīsi arī piemēru, kā to izdarīt, izmantojot App Router! Ja rodas kādas problēmas, droši sazinies, un mēs ar prieku palīdzēsim.

TacoTranslate ļauj tev ātri un automātiski lokalizēt savas React lietotnes vairāk nekā 75 valodās. Sāc jau šodien!