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

Kā tas darbojas

Kā pasaule kļūst arvien globalizētāka, tīmekļa izstrādātājiem kļūst aizvien svarīgāk 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 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: Skatiet pilnu piemēru š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 tā vietā.

1. solis: Instalējiet i18n bibliotēku

Lai jūsu Next.js lietotnē ieviestu internacionalizāciju, 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.

Uzstādī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 jūsu TacoTranslate kontu, tulkošanas projektu un attiecīgā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 tos saglabāsim kā vides mainīgos. read atslēgu mēs dēvējam par public, bet read/write atslēgu — par secret. Piemēram, jūs varētu pievienot tās .env failam 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āti jūsu teksti, piemēram, jūsu vietnes URL. Uzziniet vairāk par originām šeit.

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

3. solis: TacoTranslate iestatīšana

Lai integrētu TacoTranslate ar savu 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ā turpmāku izmantošanu vienkāršāku. Tagad, izmantojot pielāgoto /pages/_app.tsx, mēs pievienosim TacoTranslate provideri.

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 renderēt jūsu tulkojumus servera pusē. Tas ievērojami uzlabo lietotāja pieredzi, parādot tulkotu saturu uzreiz, nevis sākotnēju netulkota satura mirgošanu. Papildus tam mēs varam izlaist tīkla pieprasījumus klientā, jo mums jau ir visi nepieciešamie tulkojumi.

Sāksim ar /next.config.js izveidošanu 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āgo isProduction pārbaudi atbilstoši savai konfigurācijai. Ja true, TacoTranslate parādīs publisko API atslēgu. Ja atrodamies lokālā, testēšanas vai staging vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai nodrošinātu, ka jaunās virknes tiek nosūtītas tulkošanai.

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

Šīs funkcijas pieņem trīs argumentus: vienu Next.js Static Props Context objektu, TacoTranslate konfigurāciju un izvēles Next.js īpašības. Ņemiet vērā, ka getTacoTranslateStaticProps funkcijā parametrs revalidate 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 varēt 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 testēt!

Mēs esam pabeiguši! Jūsu Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes Translate komponentā. Ņemiet vērā, ka tikai vidēs, kur API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas tulkošanai paredzētas virknes. Iesakām izmantot slēgtu un drošu staging vidi, kurā varat testēt savu produkcijas lietotni, izmantojot šādu API atslēgu un pievienot jaunas virknes pirms pārejas tiešraidē. Tas novērsīs, ka kāds nozog jūsu slepeno API atslēgu un potenciāli uzpūš jūsu tulkojumu projektu, pievienojot jaunas, nesaistītas virknes.

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!