Labākais risinājums Next.js lietotņu internacionalizācijai (i18n)

Kā tas darbojas

Pasaule kļūstot arvien globalizētāka, tīmekļa izstrādātājiem kļūst arvien svarīgāk izveidot 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ā pamācībā mēs apskatīsim, kā pievienot internacionalizāciju jūsu React Next.js lietotnei, 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 izmantojat App Router, lūdzu, skatiet šo ceļvedi tā vietā.

1. solis: Instalējiet i18n bibliotēku

Lai savā 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 tulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.

Instalēsim to, izmantojot npm terminālī:

npm install tacotranslate

2. solis: Izveidojiet bezmaksas TacoTranslate kontu

Tagad, kad esat uzstādījis moduli, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveidojiet kontu šeit. Tas ir bezmaksas, un neprasa 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 tos saglabāsim kā vides mainīgos. read atslēga ir tā, ko mēs saucam par public, un read/write atslēga ir secret. Piemēram, tās varat pievienot failam .env savā 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 produkcijas 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 valoda).
• TACOTRANSLATE_ORIGIN: “mape”, kurā tiks glabāti jūsu teksti, piemēram, jūsu vietnes URL. Uzziniet vairāk par avotiem š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;

Drīzumā mēs 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, paplašiniet definīciju ar iepriekš minētajām īpašībām un kodu.

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

TacoTranslate ļauj renderēt jūsu tulkojumus servera pusē. Tas būtiski uzlabo lietotāja pieredzi, parādot tulkoto saturu uzreiz, nevis vispirms īslaicīgi parādot netulkotu saturu. Turklāt klientā varam izlaist tīkla pieprasījumus, jo mums jau ir visi nepieciešamie tulkojumi.

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

Modificējiet isProduction pārbaudi atbilstoši jūsu iestatījumiem. 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 pārliecinātos, ka jaunie teksti tiek nosūtīti tulkošanai.

Līdz šim mēs Next.js lietotni esam iestatījuši tikai ar atbalstīto valodu sarakstu. Nākamais solis 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 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 revalidate pie getTacoTranslateStaticProps pēc noklusējuma ir iestatīts uz 60, tāpēc jūsu tulkojumi paliek 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 Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādas virknes Translate komponentam. Ņemiet vērā, ka tikai vidēs, kurām API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas virknes tulkošanai. Mēs iesakām izveidot slēgtu un drošu staging vidi, kurā varat testēt savu ražošanas lietotni, izmantojot tādu API atslēgu, pievienojot jaunas virknes pirms nodošanas tiešraidē. Tas novērsīs, ka ikviens ikviens var nozagt jūsu slepeno API atslēgu un potenciāli uzpūst jūsu tulkojumu projektu, pievienojot jaunus, nesaistītus ierakstus.

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!