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

Kā tas darbojas

Pasaule kļūst arvien globalizētāka, un tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietojumprogrammas, kas var apmierināt lietotāju vajadzības 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ā apmācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogrammai ar servera puses renderēšanu. TL;DR: Pilnu piemēru skatiet šeit.

Šis ceļvedis ir paredzēts Next.js lietotnēm, kas izmanto Pages Router.
Ja jūs lietojat App Router, lūdzu, skatiet šo ceļvedi.

1. solis: Instalējiet i18n bibliotēku

Lai ieviestu 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 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 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. Izveido kontu šeit. Tas ir bez maksas, un nav jāpievieno kredītkarte.

TacoTranslate lietotnes 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, bet read/write atslēga ir secret. Piemēram, tās varat pievienot .env failam jūsu projekta saknē.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Noteikti nekad neatklājiet slepeno read/write API atslēgu klienta puses ražošanas vidēm.

Mēs arī pievienosim vēl divus vides mainīgos: 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 jūsu virknes tiks glabātas, 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 ērtāku. Tagad, izmantojot pielāgotu /pages/_app.tsx, 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 augstāk minētajām īpašībām un kodu.

4. solis: Servera puses renderēšanas ieviešana

TacoTranslate ļauj servera pusē renderēt jūsu tulkojumus. Tas būtiski uzlabo lietotāja pieredzi, rādot tulkoto saturu uzreiz, nevis sākotnēji rādot neatloto saturu. Turklāt mēs varam izvairīties no tīkla pieprasījumiem klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.

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

Modificējiet isProduction pārbaudi atbilstoši jūsu konfigurācijai. Ja true, TacoTranslate nodrošinās publisko API atslēgu. Ja atrodamies lokālā, testa vai izstrādes vidē (isProduction is false), mēs izmantosim slepeno read/write API atslēgu, lai pārliecinātos, ka jauni teksti tiek nosūtīti tulkošanai.

Līdz šim mēs vienīgi uzstādījām Next.js lietotni ar atbalstīto valodu sarakstu. Nākamais solis būs iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, jums jāizmanto 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, konfigurāciju TacoTranslate, un izvēles 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 visās jūsu React komponentēs.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5. solis: Izvietojiet un testējiet!

Mēs esam pabeiguši! Jūsu Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādus tekstus Translate komponentā. Ņemiet vērā, ka tikai vidēs ar read/write atļaujām attiecīgajā API atslēgā būs iespēja izveidot jaunus tulkojamos tekstus. Mēs iesakām nodrošināt aizvērtu un drošu testēšanas vidi, kurā varat pārbaudīt savu ražošanas lietotni, izmantojot šādu API atslēgu, pievienojot jaunus tekstus pirms to izlaišanas. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs jūsu tulkošanas projekta pārblīvētību ar jauniem, nesavienojamiem tekstiem.

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!