Hvernig á að innleiða alþjóðavæðingu í Next.js forriti sem notar Pages Router

Þegar heimurinn verður sífellt hnattvæðari er sífellt mikilvægara fyrir vefþróunaraðila að byggja forrit sem geta tekið mið af notendum frá mismunandi löndum og menningarheimum. Eitt af lykilatriðunum til að ná þessu er alþjóðavæðing (i18n), sem gerir þér kleift að aðlaga forritið að mismunandi tungumálum, gjaldmiðlum og dagsetningasniðum.

Í þessari leiðbeiningu munum við fara yfir hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt með þjónsíðugerð (server-side rendering). TL;DR: Sjáðu fulla dæmið hér.

Þessi leiðarvísir er fyrir Next.js forrit sem nota Pages Router.
Ef þú ert að nota App Router, vinsamlegast skoðaðu þennan leiðarvísir í staðinn.

Skref 1: Settu upp i18n-bókasafn

Til að innleiða alþjóðavæðingu í Next.js-forritinu þínu skulum við fyrst velja i18n-bókasafn. Það eru nokkur vinsæl bókasöfn, þar á meðal next-intl. Í þessu dæmi munum við hins vegar nota TacoTranslate.

TacoTranslate þýðir strengina þína sjálfkrafa yfir á öll tungumál með hjálp háþróaðrar gervigreindar og losar þig við leiðinlega meðhöndlun JSON-skráa.

Setjum það upp með npm í skipanalínunni þinni:

npm install tacotranslate

Skref 2: Stofnaðu ókeypis TacoTranslate-reikning

Nú þegar þú hefur sett upp viðbótina er kominn tími til að búa til reikning hjá TacoTranslate, þýningarverkefni og tilheyrandi API-lykla. Búðu til reikning hér. Það er ókeypis og krefst ekki að þú gefir upp kreditkortanúmer.

Í notendaviðmóti TacoTranslate skaltu búa til verkefni og fara í flipann fyrir API-lykla. Búðu til einn read lykil og einn read/write lykil. Við munum geyma þá sem umhverfisbreytur. read lykillinn er það sem við köllum public og read/write lykillinn er secret. Til dæmis gætirðu bætt þeim í .env skrá í rót verkefnisins.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að hin leynilega read/write API-lykill leki aldrei út til viðskiptavinshluta í framleiðsluumhverfum.

Við munum einnig bæta við tveimur umhverfisbreytum í viðbót: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefin varasvæðiskóði. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem textastrengirnir þínir verða vistaðir, til dæmis vefslóð (URL) vefsíðunnar þinnar. Lestu meira um upprunana hér.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Skref 3: Uppsetning TacoTranslate

Til að tengja TacoTranslate við forritið þitt þarftu að búa til client sem notar API-lyklana sem þú bjóst til áður. Til dæmis skaltu búa til skrá sem heitir /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;

Við munum sjálfkrafa skilgreina TACOTRANSLATE_API_KEY innan skamms.

Að búa til client-inn í sérstöku skrá gerir það auðveldara að nota hann aftur síðar. Nú, með því að nota sérsniðið /pages/_app.tsx, bætum við TacoTranslate veitanda.

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>
	);
}

Ef þú ert þegar með sérsniðin pageProps og _app.tsx, vinsamlegast bættu skilgreiningunni með eiginleikum og kóðanum hér að ofan.

Skref 4: Innleiðing þjónustuhliðarröðunar

TacoTranslate leyfir server-side rendering á þýðingum þínum. Þetta bætir verulega notendaupplifunina með því að sýna þýtt efni strax, í stað þess að birta fyrst skamma sýn af óþýddu efni. Að auki getum við sleppt netbeiðnum í vafranum, því við höfum nú þegar allar þýðingar sem við þurfum.

Við byrjum á því að búa til eða breyta /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'),
	});
};

Breytið isProduction athuguninni til að henta uppsetningu ykkar. Ef true, mun TacoTranslate birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða staging-umhverfi (isProduction is false), munum við nota hinn leynda read/write API-lykilinn til að tryggja að nýjar textastrengir séu sendir til þýðingar.

Hingað til höfum við aðeins sett upp Next.js-forritið með lista yfir studd tungumál. Næsta skref er að sækja þýðingar fyrir allar síður þínar. Til þess munt þú nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum kröfum.

Þessi föll taka þrjú rök: einn Next.js Static Props Context hlut, stillingar fyrir TacoTranslate og valfrjálsar Next.js-breytur. Athugaðu að revalidate á getTacoTranslateStaticProps er sjálfgefið stillt á 60, svo þýðingarnar þínar haldist uppfærðar.

Til að nota annað hvort fall á síðu, gerum við ráð fyrir að þú hafir skrá eins og /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!"/>;
}

Þú ættir núna að geta notað Translate íhlutann til að þýða strengi í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Settu í framleiðslu og prófaðu!

Það er búið! Vefforritið þitt í React verður nú sjálfkrafa þýtt þegar þú bætir við strengjum í Translate íhlut. Athugaðu að aðeins umhverfi með read/write heimildum á API-lyklinum geta búið til nýja strengi til þýðingar. Við mælum með að hafa lokað og öruggt staging-umhverfi þar sem þú getur prófað framleiðsluforritið þitt með slíkum API-lykli og bætt við nýjum strengjum áður en það fer í framleiðslu. Þetta mun koma í veg fyrir að einhver einhver nái að stela leynilegum API-lykli þínum, og mögulega fylli þýðingarverkefnið þitt með nýjum, ótengdum strengjum.

Gakktu úr skugga um að skoða fullkomna dæmið á GitHub-prófílnum okkar. Þar finnur þú einnig dæmi um hvernig á að gera þetta með App Router! Ef þú lendir í einhverjum vandræðum, ekki hika við að hafa samband, og við aðstoðum þig með ánægju.

TacoTranslate gerir þér kleift að staðfæra React-forritin þín sjálfkrafa og fljótt, bæði til og frá yfir 75 tungumálum. Byrjaðu í dag!