Geriausias sprendimas internacionalizacijai (i18n) Next.js programėlėms

Kaip tai veikia

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

Šiame vadove nagrinėsime, 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, vietoj to peržiūrėkite šį vadovą.

1 žingsnis: Įdiekite i18n biblioteką

Norėdami įgyvendinti internacionalizaciją savo Next.js programėlėje, pirmiausia pasirinkime i18n biblioteką. Yra kelios populiarios bibliotekos, įskaitant next-intl. Tačiau šiame pavyzdyje naudosime TacoTranslate.

TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą, naudodamas pažangų dirbtinį intelektą (DI), 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 įdiegėte modulį, laikas susikurti savo TacoTranslate paskyrą, vertimų projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja nurodyti kredito kortelės.

TacoTranslate programos vartotojo sąsajoje sukurkite projektą ir eikite į jo API raktų skirtuką. Sukurkite vieną read raktą ir vieną read/write raktą. Juos išsaugosime kaip aplinkos kintamuosius. read raktą vadiname public, o read/write raktą — secret. Pavyzdžiui, galite juos pridėti į .env failą jūsų projekto šakniniame kataloge.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Įsitikinkite, kad niekada neatskleisite slaptos read/write API rakto produkcinėse kliento pusės aplinkose.

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į į en (anglų).
• 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 apibrėšime TACOTRANSLATE_API_KEY.

Kliento kūrimas atskirame faile palengvina jo pakartotinį naudojimą vėliau. Dabar, naudojant pritaikytą /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, papildykite jų apibrėžimą aukščiau nurodytomis savybėmis ir kodu.

4 žingsnis: Serverio pusės atvaizdavimas

TacoTranslate palaiko vertimų atvaizdavimą serveryje. Tai žymiai pagerina naudotojo patirtį, nes iš karto rodomas išverstas turinys, o ne pirmiausia trumpai pasirodantis neišverstas turinys. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visus mums reikalingus vertimus.

Pradėsime nuo /next.config.js failo sukūrimo arba pakeitimo.

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

Priderinkite isProduction patikrinimą prie savo konfigūracijos. Jei true, TacoTranslate rodys viešąjį API raktą. Jei esame vietinėje, testavimo ar parengiamojoje (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 nustatėme Next.js programai palaikomų kalbų sąrašą. 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 revalidate pagal numatytuosius nustatymus nustatyta 60, todėl jūsų vertimai lieka atnaujinti.

Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite puslapio failą, pavyzdžiui, /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: Paleiskite ir išbandykite!

Viskas! Jūsų Next.js programa dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write leidimus prie API rakto, galės sukurti naujas eilutes, kurias reikia išversti. Rekomenduojame turėti uždarą ir saugią parengimo (staging) aplinką, kurioje galite išbandyti savo produkcinę programą su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant į gamybą. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir nuo to, kad vertimų projektas nebūtų užpildytas naujomis, nesusijusiomis eilutėmis.

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!