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

Kaip tai veikia

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

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

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

1 žingsnis: Įdiekite i18n biblioteką

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

TacoTranslate automatiškai išverčia jūsų tekstus į bet kokią kalbą naudodamas pažangiąją dirbtinį intelektą, taip pat atlaisvina jus nuo nuobodžios JSON failų valdymo.

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

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulis įdiegtas, laikas sukurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama ir nereikalauja įvesti kredito kortelės duomenų.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Įsitikinkite, kad niekada neišskleistumėte slaptų read/write API rakto klientinėje gamybinėje aplinkoje.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Numatytoji atsarginė lokalės reikšmė. Šiame pavyzdyje nustatysime ją kaip en, tai yra anglų kalbai.
• TACOTRANSLATE_ORIGIN: „Aplankas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, jūsų svetainės URL. Čia sužinokite daugiau apie originus.

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;

Mes netrukus automatiškai apibrėšime TACOTRANSLATE_API_KEY.

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

4 žingsnis: Serverio pusės renderinimo įgyvendinimas

TacoTranslate leidžia atlikti serverio pusės atvaizdavimą jūsų vertimams. Tai žymiai pagerina naudotojo patirtį, rodant iš karto išverstą turinį, o ne pirmiausia nepaverstą turinį. Be to, klientinėje pusėje galime praleisti 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'),
	});
};

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 pagal jūsų poreikius.

Šios funkcijos priima tris argumentus: vieną Next.js Static Props Context objektą, konfigūraciją TacoTranslate ir neprivalomus Next.js parametrus. Atkreipkite dėmesį, kad revalidate reikšmė getTacoTranslateStaticProps pagal nutylėjimą nustatyta į 60, kad jūsų vertimai būtų nuolat atnaujinami.

Norėdami naudoti bet kurią iš funkcijų puslapyje, tarkime, turite puslapio failą kaip /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ą vertimui visose savo React komponentų eilutėse.

import {Translate} from 'tacotranslate/react';

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

5 žingsnis: Diegimas ir testavimas!

Mes baigėme! Jūsų Next.js programa dabar bus automatiškai verčiama, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos, turinčios read/write leidimus API raktui, galės kurti naujas verčiamos eilutes. Rekomenduojame turėti uždarą ir saugią testavimo aplinką, kurioje galėtumėte išbandyti savo gamybinę programą su tokiu API raktu, pridėdami naujas eilutes prieš pradėdami naudojimą. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir potencialiai nepagrįstai padidintų jūsų vertimo projektą pridėdamas 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!