Labākais risinājums internacionalizācijai (i18n) Next.js lietotnēs

Kā tas darbojas

Pasaule kļūst arvien globalizētāka, tāpēc tīmekļa izstrādātājiem ir arvien svarīgāk veidot lietojumprogrammas, 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 lietojumprogrammu dažādām valodām, valūtām un datuma formātiem.

Šajā pamācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogramma, izmantojot servera puses renderēšanu. TL;DR: Skatīt pilnu piemēru šeit.

Šis ceļvedis ir paredzēts Next.js lietojumprogrammā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 internacionālumu 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 jebkurā valodā, izmantojot modernāko mākslīgo intelektu, un atbrīvo jūs no nogurdinoš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 modulis ir instalēts, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveido kontu šeit. Tas ir bez maksas, un nav nepieciešams pievienot 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 un read/write atslēga ir secret. Piemēram, jūs varētu pievienot tās .env failam jūsu projekta saknes mapē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Noteikti nekad nenopludiniet slepeno read/write API atslēgu klienta puses produkcijas 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ā 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

Lai integrētu TacoTranslate ar savu lietojumprogrammu, jums būs jāizveido klients, izmantojot agrākā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 vienkāršāku. 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, papildiniet definīciju ar iepriekš minētajām īpašībām un kodu.

4. solis: Servera puses renderēšanas īstenošana

TacoTranslate ļauj veikt tulkojumu servera puses atveidošanu. Tas ievērojami uzlabo lietotāja pieredzi, nekavējoties parādot tulkoto saturu, nevis vispirms īslaicīgi rādīt netulkotu saturu. Papildus tam mēs varam izlaist tīkla pieprasījumus klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.

Mēs 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'),
	});
};

Modificējiet isProduction pārbaudi atbilstoši 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 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ākošais solis būs iegū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, konfigurācija TacoTranslate, un papildu Next.js īpašības. Ņemiet vērā, ka revalidate pie getTacoTranslateStaticProps pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi vienmēr 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: Izvietot un pārbaudīt!

Mēs esam pabeiguši! Jūsu Next.js lietotne tagad automātiski tiks tulkota, kad pievienosiet jebkādus tekstus Translate komponentam. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām API atslēgā būs iespēja izveidot jaunus tulkojamos tekstus. Mēs iesakām izmantot slēgtu un drošu izmēģinājuma vidi, kurā varat testēt savu ražošanas lietotni ar šādu API atslēgu, pievienojot jaunus tekstus pirms publicēšanas. Tas novērsīs jūsu slepenās API atslēgas zagšanu un potenciāli nepieļaus tulkojumu projekta piepildīšanu ar jauniem, nesaistītiem teksta fragmentiem.

Noteikti apskatiet pilnu piemēru mūsu GitHub profilā. Tur jūs arī atradīsiet piemēru, kā to darīt, izmantojot App Router ! Ja rodas kā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 lietojumprogrammas ātri uz jebkuru valodu un no tās. Sāciet jau šodien!