Geriausias sprendimas internacionalizavimui (i18n) Next.js programose

Kaip tai veikia

Kai pasaulis tampa vis labiau globalizuotas, vis svarbiau interneto kūrėjams kurti programas, kurios galėtų patenkinti vartotojus iš skirtingų šalių ir kultūrų. Vienas pagrindinių būdų tai pasiekti yra tarptautiškumas (i18n), kuris leidžia pritaikyti jūsų programą skirtingoms kalboms, valiutoms ir datų formatams.

Šiame vadove nagrinėsime, kaip pridėti tarptautiškumą į jūsų React Next.js programą, naudojant serverio pusės atvaizdavimą. TL;DR: Pilną pavyzdį rasite čia.

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

1 žingsnis: Įdiekite i18n biblioteką

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

TacoTranslate automatiškai išverčia jūsų tekstus į bet kurią kalbą, naudodama pažangią dirbtinį intelektą, ir atlaisvina jus nuo varginančio JSON failų tvarkymo.

Įdiekime ją naudodami npm savo terminale:

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai įdiegėte modulį, pats laikas sukurti savo TacoTranslate paskyrą, vertimo projektą ir susijusius API raktus. Sukurkite paskyrą čia. Tai nemokama, ir nereikia pridėti 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 raktas yra tas, kurį vadiname public, o read/write raktas yra secret. Pavyzdžiui, juos galite pridėti į .env failą savo projekto šakniniame kataloge.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišplatintumėte slapto read/write API rakto klientinėje gamybos 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 ją nustatysime į en – anglų kalbą.
• TACOTRANSLATE_ORIGIN: „Aplankas“, kuriame bus saugomos jūsų sekos, pvz., 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" su savo programa, turėsite sukurti klientą naudodami anksčiau pateiktus API raktus. Pavyzdžiui, sukurkite failą, pavadintą /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 pasirinktinius pageProps ir _app.tsx, prašome išplėsti apibrėžimą naudodami aukščiau pateiktas savybes ir kodą.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia jūsų vertimus atvaizduoti serverio pusėje. Tai žymiai pagerina naudotojo patirtį, nes iš karto rodomas išverstas turinys, o ne pirmiausia trumpai užsidega neišverstas turinys. Be to, galime praleisti tinklo užklausas kliento pusėje, 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, atsižvelgdami į savo poreikius.

Š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 reikšmė esant getTacoTranslateStaticProps yra numatyta kaip 60, kad jūsų vertimai būtų nuolat atnaujinami.

Norint naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad turite puslapio failą pavadinimu /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 verčiama, kai pridėsite bet kokius tekstus į Translate komponentą. Atkreipkite dėmesį, kad tik aplinkos su read/write teisėmis API rakte galės kurti naujus tekstus vertimui. Rekomenduojame turėti uždarą ir saugią testavimo aplinką, kurioje galite išbandyti savo gamybinę programą su tokiu API raktu, pridėdami naujus tekstus prieš paleidžiant į gyvą versiją. Tai padės išvengti slapto API rakto vagystės ir užkirs kelią jūsų vertimo projektui išsipūsti pridėjus naujų, nesusijusių tekstų.

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

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