Geriausias sprendimas Next.js programų tarptautinimui (i18n)

Kaip tai veikia

Kadangi 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), 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 renderinimą. 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ą (i18n) savo Next.js programoje, pirmiausia pasirinksime 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ą ir atleidžia jus nuo varginančio JSON failų valdymo.

Įdiekime ją naudodami npm terminale:

npm install tacotranslate

Žingsnis 2: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai įdiegėte modulį, laikas sukurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja pridėti kreditinės kortelės.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Įsitikinkite, kad niekada neatskleisite slapto read/write API rakto klientinėse gamybos aplinkose.

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į kaip en, reiškiantį anglų kalbą.
• 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

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 atskiroje faile palengvina jo vėlesnį pakartotinį naudojimą. 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, išplėskite jų apibrėžimą pridėdami aukščiau pateiktas savybes ir kodą.

4 žingsnis: Serverio pusės renderavimo įgyvendinimas

TacoTranslate leidžia serverio pusėje atvaizduoti jūsų vertimus. Tai žymiai pagerina vartotojo patirtį — išverstas turinys rodomas iš karto, o ne pirmiausia pasirodo neišverstas turinys. Be to, klientinėje pusėje galime praleisti tinklo užklausas, nes jau turime visus reikalingus vertimus.

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

Pakeiskite isProduction patikrinimą pagal savo konfigūraciją. Jei true, TacoTranslate pateiks viešąjį API raktą. Jei esame vietinėje, testavimo arba parengiamojoje aplinkoje (isProduction is false), naudosime slaptąjį read/write API raktą, kad užtikrintume, jog naujos eilutės būtų išsiųstos vertimui.

Iki šiol Next.js programoje mes tik nustatėme palaikomų kalbų sąrašą. Kitas žingsnis — gauti vertimus visiems jūsų puslapiams. Tam naudosite arba getTacoTranslateStaticProps arba getTacoTranslateServerSideProps pagal jūsų reikalavimus.

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, TacoTranslate konfigūraciją ir pasirenkamas Next.js savybes. Atkreipkite dėmesį, kad revalidate per getTacoTranslateStaticProps pagal numatytuosius nustatymus nustatytas į 60, todėl jūsų vertimai bus nuolat atnaujinami.

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: Diegti ir išbandyti!

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ą staging aplinką, kurioje galėtumėte išbandyti savo produkcinę programą su tokiu API raktu ir pridėti naujas eilutes prieš paleidžiant. Tai užkirs kelią kam nors pavogti jūsų slaptą API raktą ir galimam vertimų projekto išsipučimui dėl naujų, nesusijusių eilučių pridėjimo.

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!