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

Kā tas darbojas

Kļūstot pasaulei arvien globalizētākai, tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietojumprogrammas, kas spēj apmierināt 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 aplūkosim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogrammai, izmantojot servera puses renderēšanu. TL;DR: Skatiet pilno piemēru š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 teksta virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldīšanas.

Instalēsim to, izmantojot npm savā 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. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams pievienot kredītkarti.

TacoTranslate lietotnes 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ēga ir tā, ko saucam par public, un read/write atslēga ir secret. Piemēram, jūs varat pievienot tās failam .env 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 klienta puses 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 lokāles 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. 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š minē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īz automātiski definēsim TACOTRANSLATE_API_KEY.

Klienta izveide atsevišķā failā padara to vieglāku lietošanai 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ā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 ļauj veikt jūsu tulkojumu servera puses renderēšanu. Tas būtiski uzlabo lietotāja pieredzi — tulkots saturs tiek rādīts uzreiz, nevis vispirms parādās īslaicīgs nenotulkots saturs. Turklāt klienta pusē varam izlaist tīkla pieprasījumus, 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 jūsu iestatījumiem. Ja true, TacoTranslate atklās publisko API atslēgu. Ja atrodamies lokālā, testēšanas vai izvietošanas (staging) vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai pārliecinātos, ka jaunās teksta virknes tiek nosūtītas tulkošanai.

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

Šīs funkcijas saņ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 kādu no 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 tekstus 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 Next.js lietotne tagad tiks automātiski tulkota, kad pievienosit jebkuru tekstu Translate komponentam. Ņemiet vērā, ka tikai tās vides, kurām API atslēgai piešķirtas read/write atļaujas, varēs izveidot jaunus tekstus, kuri tiks tulkoti. Mēs iesakām izveidot slēgtu un drošu testēšanas (staging) vidi, kurā varat testēt savu ražošanas lietotni ar šādu API atslēgu, pievienojot jaunus tekstus pirms izvietošanas. Tas neļaus nevienam nevienam nozagt jūsu slepeno API atslēgu un potenciāli uzpūst jūsu tulkojumu projektu, pievienojot jaunus, nesaistītus tekstus.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!