Geriausias sprendimas tarptautinimui (i18n) Next.js programėlėse

Kaip tai veikia

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

Šiame pamokoje išnagrinėsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos su serverio pusės atvaizdavimu. TL;DR: Peržiūrėkite pilną pavyzdį čia.

Šis vadovas skirtas Next.js programėlėms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome vietoje to peržiūrėti šį vadovą.

1 žingsnis: Įdiekite i18n biblioteką

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

TacoTranslate automatiškai verčia jūsų tekstus į bet kurią kalbą naudodama pažangiausias dirbtinio intelekto technologijas, atlaisvindama jus nuo varginančio JSON failų tvarkymo.

Įdiekime ją naudodami npm jūsų terminale:

npm install tacotranslate

2 žingsnis: 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 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 raktas yra tai, ką vadiname public, o read/write raktas yra secret. Pavyzdžiui, juos galite pridėti prie .env failo, esančio jūsų projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišleisite slaptų read/write API raktų kliento pusės gamybos aplinkose.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytoji atsarginė lokalė. Šiame pavyzdyje nustatysime en anglų kalbai.
• TACOTRANSLATE_ORIGIN: „Aplankas“, kur 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 su savo programa, 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, naudodami nestandartinį /pages/_app.tsx, pridėsime TacoTranslate tiekė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 pasirinktinį pageProps ir _app.tsx, prašome išplėsti apibrėžimą aukščiau pateiktomis savybėmis ir kodu.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia vykdyti vertimus serverio pusėje. Tai labai pagerina naudotojo patirtį, nes iš karto rodomas išverstas turinys, o ne trumpas neišversto turinio blyksnis. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visas reikalingas vertimus.

Pradėsime kuriant arba modifikuojant /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ą, kad jis atitiktų jūsų sąranką. Jei true, "TacoTranslate" pateiks viešąjį API raktą. Jei esame vietinėje, bandomojoje ar sustojimo aplinkoje (isProduction is false), naudosime slaptą read/write API raktą, kad įsitikintume, jog naujos eilutės siunčiamos 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, atsižvelgdami į savo poreikius.

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

Norint 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 tekstus visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

5 žingsnis: Diegti ir išbandyti!

Mes baigėme! 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 read/write leidimus API raktui, galės kurti naujus tekstus vertimui. Rekomenduojame turėti uždarą ir saugią testavimo (staging) aplinką, kurioje galėsite išbandyti savo gamybinę programą su tokiu API raktu, pridedant naujus tekstus prieš pradedant veikti. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galbūt neproporcingai padidintų jūsų vertimo projektą pridedant naujus, nesusijusius tekstus.

Būtinai peržiūrėkite visą pavyzdį mūsų GitHub profilyje. Ten taip pat rasite pavyzdį, kaip tai padaryti naudojant App Router! Jei susidursite su kokiomis nors problemomis, nedvejodami susisiekite, ir mes mielai jums padėsime.

TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į ir iš bet kurios kalbos. Pradėkite šiandien!