Geriausias sprendimas Next.js programų internacionalizacijai (i18n)

Kaip tai veikia

Kadangi pasaulis tampa vis labiau globalizuotas, interneto kūrėjams vis svarbiau kurti programas, galinčias aptarnauti vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra internacionalizacija (i18n), kuri leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.

Šiame vadove apžvelgsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, naudojant serverio pusės atvaizdavimą. TL;DR: Peržiūrėkite visą pavyzdį čia.

Šis vadovas skirtas Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, vietoje to peržiūrėkite šį vadovą.

1 žingsnis: Įdiekite i18n biblioteką

Norint įgyvendinti internacionalizaciją jūsų Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra kelios populiarios bibliotekos, įskaitant next-intl. Vis dėlto šiame pavyzdyje naudosime TacoTranslate.

TacoTranslate automatiškai išverčia jūsų teksto eilutes į bet kurią kalbą naudodamas pažangų dirbtinį intelektą ir atleidžia jus nuo varginančio JSON failų tvarkymo.

Įdiekime jį naudodami npm savo terminale:

npm install tacotranslate

Žingsnis 2: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulis įdiegtas, metas sukurti TacoTranslate paskyrą, vertimo projektą ir su tuo susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja kreditinės kortelės.

TacoTranslate programos sąsajoje sukurkite projektą ir eikite į jo API raktų skiltį. Sukurkite vieną read raktą ir vieną read/write raktą. Išsaugosime juos kaip aplinkos kintamuosius. read raktą vadiname public, o read/write raktą — secret. Pavyzdžiui, juos galite pridėti į .env failą savo projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Užtikrinkite, kad slaptas read/write API raktas niekada nepakliūtų į klientinės pusės gamybines aplinkas.

Taip pat pridėsime dar dvi aplinkos kintamąsias: TACOTRANSLATE_DEFAULT_LOCALE ir TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytasis atsarginis lokalės kodas. Šiame pavyzdyje nustatysime jį kaip en (anglų kalbai).
• TACOTRANSLATE_ORIGIN: „aplankas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui jūsų svetainės URL. Skaitykite daugiau apie originus čia.

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

3 žingsnis: TacoTranslate nustatymas

Norėdami integruoti TacoTranslate į savo programą, turėsite sukurti klientą naudodami anksčiau gautus API raktus. Pavyzdžiui, sukurkite failą pavadinimu /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;

Netrukus automatiškai nustatysime TACOTRANSLATE_API_KEY.

Kliento sukūrimas atskirame faile leidžia jį vėliau lengviau naudoti. Dabar naudodami tinkintą /pages/_app.tsx, pridėsime TacoTranslate teikėją.

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

Jei jau turite pasirinktinius pageProps ir _app.tsx, pridėkite aukščiau pateiktas savybes ir kodą į apibrėžimą.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia serverio pusėje atvaizduoti jūsų vertimus. Tai žymiai pagerina vartotojo patirtį — verčiamas turinys rodomas iš karto, užuot pirmiausia trumpam pasirodžius nevertintam turiniui. Be to, kliento pusėje galime apeiti tinklo užklausas, nes jau turime visus reikalingus vertimus.

Pradėsime kurdami arba keisdami /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'),
	});
};

Modifikuokite isProduction patikrinimą pagal savo nustatymus. Jei true, TacoTranslate pateiks viešąjį API raktą. Jei esame vietinėje, testavimo ar staging aplinkoje (isProduction is false), naudosime slaptąjį read/write API raktą, kad naujos eilutės būtų išsiųstos vertimui.

Iki šiol mes tik sukonfigūravome Next.js programą su palaikomų kalbų sąrašu. Kitas žingsnis — gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps arba getTacoTranslateServerSideProps priklausomai nuo jūsų reikalavimų.

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir neprivalomus Next.js parametrus. Atkreipkite dėmesį, kad getTacoTranslateStaticProps funkcijoje esantis revalidate pagal numatytuosius nustatymus nustatytas į 60, todėl jūsų vertimai lieka atnaujinti.

Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite puslapio failą, pvz. /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!"/>;
}

Dabar turėtumėte galėti naudoti Translate komponentą, kad išverstumėte eilutes visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

Žingsnis 5: Diegti ir išbandyti!

Viskas paruošta! Jūsų Next.js programa dabar bus automatiškai išversta, kai į Translate komponentą pridėsite bet kokius tekstus. Atkreipkite dėmesį, kad tik tos aplinkos, kurių API rakto leidimai yra read/write, galės kurti naujas eilutes, kurios bus išverstos. Rekomenduojame turėti uždarą ir saugią parengimo (staging) aplinką, kurioje galėtumėte išbandyti produkcinę programą su tokiu API raktu, pridėdami naujas eilutes prieš paleidžiant gyvai. Tai neleis, kad bet kas bet kas pavogtų jūsų slaptą API raktą ir potencialiai apkrautų jūsų vertimų projektą pridėdami naujas, nesusijusias eilutes.

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!