Kaip įgyvendinti internacionalizaciją Next.js programoje, naudojančioje Pages Router

Kadangi pasaulis tampa vis labiau globalizuotas, interneto kūrėjams vis svarbiau kurti programas, kurios galėtų 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 datų formatams.

Šiame vadove apžvelgsime, kaip pridėti internacionalizaciją prie jūsų React Next.js programos, 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ą

Norint įgyvendinti internacionalizaciją jūsų Next.js programoje, pirmiausia pasirinksime 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ą DI technologiją, ir atlaisvina jus nuo varginančio JSON failų valdymo.

Įdiekime ją naudodami npm savo terminale:

npm install tacotranslate

2 žingsnis: Susikurkite 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 nereikia 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 į .env failą savo projekto šakninėje direktorijoje.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Būkite tikri, kad niekada neišleisite slapto read/write API rakto klientinės 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 ją nustatysime kaip en (anglų kalba).
• TACOTRANSLATE_ORIGIN: „Katalogas“, kuriame bus saugomos jūsų eilutės, pavyzdžiui, 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 ankstesnius 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, naudojant 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 pritaikytus pageProps ir _app.tsx, prašome išplėsti apibrėžimą su aukščiau pateiktomis savybėmis ir kodu.

4 žingsnis: Serverio pusės atvaizdavimo įgyvendinimas

TacoTranslate leidžia atlikti serverio pusės atvaizdavimą jūsų vertimams. Tai žymiai pagerina naudotojo patirtį, nes iš karto rodomas išverstas turinys, o ne pirmiausia trumpas neišversto turinio blyksnis. 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, priklausomai nuo jūsų poreikių.

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

Norėdami naudoti bet kurią iš šių funkcijų puslapyje, tarkime, kad 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 eilutes visuose savo React komponentuose.

import {Translate} from 'tacotranslate/react';

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

5 žingsnis: Diegti ir testuoti!

Mes baigėme! Jūsų React programa dabar bus automatiškai išversta, kai pridėsite bet kokius tekstus į Translate komponentą. Atkreipkite dėmesį, kad naujų verčiamų tekstų kūrimui galės naudotis tik tie aplinkos, kuriose API raktui suteikti read/write leidimai. Rekomenduojame turėti uždarytą ir apsaugotą staging aplinką, kur galėtumėte testuoti jūsų produkcinę programą su tokio tipo API raktu, pridėdami naujus tekstus prieš paleidžiant. Tai apsaugos nuo to, kad kas nors pavogtų jūsų slaptą API raktą ir galimai pripildytų jūsų vertimo projektą naujais, nesusijusiais tekstais.

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

TacoTranslate leidžia automatiškai lokalizuoti jūsų React programas greitai į daugiau nei 75 kalbas ir iš jų. Pradėkite jau šiandien!