Geriausias sprendimas internacionalizacijai (i18n) Next.js programose

Kaip tai veikia

Pasauliui globalėjant, tinklalapių kūrėjams vis svarbiau kurti programas, pritaikytas vartotojams iš skirtingų šalių ir kultūrų. Viena iš pagrindinių priemonių tai pasiekti yra internacionalizacija (i18n), kuri leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datos formatams.

Šiame vadove aptarsime, 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ą

Norėdami įgyvendinti tarptautiškumą savo Next.js programoje, pirmiausia pasirinkime i18n biblioteką. Yra keletas populiarių bibliotekų, įskaitant next-intl. Tačiau šiame pavyzdyje mes naudosime TacoTranslate.

TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą naudodama pažangų dirbtinį intelektą ir atleidžia jus nuo nuobodaus JSON failų tvarkymo.

Įdiekime jį naudodami npm savo terminale:

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulį jau įdiegėte, metas susikurti savo TacoTranslate paskyrą, vertimų projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja pridėti kreditinės kortelės.

TacoTranslate sąsajoje sukurkite projektą ir atidarykite jo API raktų skirtuką. Sukurkite vieną read raktą ir vieną read/write raktą. Išsaugosime juos kaip aplinkos kintamuosius. read raktas yra tai, ką vadiname public, o read/write raktas yra secret. Pavyzdžiui, galite juos pridėti į .env failą projekto šakninėje aplanke.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Įsitikinkite, kad slaptas read/write API raktas niekada nepatektų į kliento pusės gamybines aplinkas.

Taip pat pridėsime dar du aplinkos kintamuosius: TACOTRANSLATE_DEFAULT_LOCALE ir TACOTRANSLATE_ORIGIN.

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

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

Žingsnis 3: TacoTranslate nustatymas

Kad integruotumėte TacoTranslate į savo programą, turėsite sukurti klientą, naudojant 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 vėlesnį naudojimą. Dabar, naudojant pasirinktą /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, išplėskite apibrėžimą, pridėdami aukščiau nurodytas savybes ir kodą.

4-as žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate palaiko vertimų atvaizdavimą serverio pusėje. Tai žymiai pagerina vartotojo patirtį, nes išverstą turinį pateikia iš karto, užuot pirmiausia trumpam parodžius neišverstą turinį. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visus reikalingus vertimus.

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

Pritaikykite isProduction patikrinimą pagal savo nustatymus. Jei true, TacoTranslate pateiks viešąjį API raktą. Jei esame vietinėje, testavimo arba parengimo (staging) aplinkoje (isProduction is false), naudosime slaptąjį read/write API raktą, kad įsitikintume, jog naujos eilutės bus išsiųstos vertimui.

Iki šiol mes tik nustatėme Next.js programoje palaikomų kalbų sąrašą. Toliau gausime vertimus visiems jūsų puslapiams. Tam, priklausomai nuo jūsų poreikių, naudosite arba getTacoTranslateStaticProps, arba getTacoTranslateServerSideProps.

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

Norėdami naudoti kurią nors 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!"/>
}

5-asis žingsnis: Įdiekite ir išbandykite!

Viskas paruošta! Jūsų Next.js programa dabar bus automatiškai išversta, kai pridėsite bet kokius tekstus į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios API rakto read/write teises, galės kurti naujas eilutes vertimui. Rekomenduojame turėti uždarą ir saugią testavimo (staging) aplinką, kurioje galėsite išbandyti savo gamybinę programą su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant ją į gamybą. Tai neleis niekam pavogti jūsų slapto API rakto ir, potencialiai, užpildyti jūsų vertimų projektą 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!