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

Kaip tai veikia

Kadangi pasaulis tampa vis labiau globalizuotas, vis svarbiau yra, kad interneto kūrėjai kurtų programas, kurios galėtų aptarnauti vartotojus iš skirtingų šalių ir kultūrų. Vienas iš pagrindinių būdų tai pasiekti yra tarptautiškumas (i18n), kuris leidžia jums pritaikyti savo programą skirtingoms kalboms, valiutoms ir datos formatams.

Šiame vadove išmoksite, kaip pridėti tarptautiškumą prie savo React Next.js programos su serverio pusės atvaizdavimu. TL;DR: Pilną pavyzdį rasite čia.

Ši instrukcija skirta Next.js programoms, kurios naudoja Pages Router.
Jei naudojate App Router, prašome vietoj to peržiūrėti šią instrukciją.

1 veiksmas: Į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ą, naudodamas pažangią DI technologiją, ir atlaisvina jus nuo nuobodaus JSON failų valdymo.

Įdiekime jį naudodami npm savo terminale:

npm install tacotranslate

2 žingsnis: Sukurkite nemokamą TacoTranslate paskyrą

Dabar, kai modulį jau įdiegėte, 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ų skiltį. Sukurkite vieną read raktą ir vieną read/write raktą. Juos išsaugosime kaip aplinkos kintamuosius. read raktą vadiname public o read/write raktą – secret. Pavyzdžiui, juos galite pridėti prie .env failo savo projekto šaknyje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišleisite 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ė. Šiame pavyzdyje ją nustatysime kaip en – anglų kalba.
• TACOTRANSLATE_ORIGIN: „Katalogas“, kuriame bus saugomi jūsų tekstai, 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 leidžia jį lengviau panaudoti vėliau. Dabar, naudodami pasirinktinį /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 suasmenintus pageProps ir _app.tsx, prašome išplėsti apibrėžimą su aukščiau nurodytomis savybėmis ir kodu.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia atlikti vertimų serverio pusėje atvaizdavimą. Tai žymiai pagerina vartotojo patirtį, nes iš karto rodoma išversta turinys, o ne pirmiausia blyksi nevertintas turinys. Be to, galime praleisti tinklo užklausas kliento pusėje, nes jau turime visas reikalingas 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ą, 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ą, kad išverstumėte tekstus visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

5 žingsnis: Diegimas ir testavimas!

Mes baigėme! Jūsų Next.js programėlė dabar bus automatiškai išversta, kai pridėsite bet kokias eilutes į Translate komponentą. Atkreipkite dėmesį, kad naujas verčiamas eilutes galės kurti tik aplinkos, turinčios read/write leidimus API raktui. Rekomenduojame turėti uždarą ir apsaugotą staging aplinką, kurioje galėtumėte testuoti savo produkcijos programėlę su tokio tipo API raktu, pridedant naujas eilutes prieš paleisdami ją į gyvą režimą. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galbūt apkrautų jūsų vertimų projektą pridėdamas naujų, nesusijusių eilučių.

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!