Hvernig á að innleiða alþjóðavæðingu (i18n) í 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 þessar leiðbeiningar í 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. Hins vegar, í þessu dæmi munum við nota TacoTranslate.

TacoTranslate þýðir sjálfkrafa strengina þína yfir á hvaða tungumál sem er með bestu gervigreindartækni og losar þig við leiðinlega vinnu við að halda utan um JSON-skrár.

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

npm install tacotranslate

Skref 2: Búðu til ókeypis TacoTranslate-reikning

Nú þegar þú hefur sett upp módúlinn er kominn tími til að búa til TacoTranslate-reikninginn þinn, þýðingarverkefni og tengda API-lykla. Búðu til reikning hér. Það er ókeypis og þú þarft ekki að gefa upp kreditkort.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei hinum leynilega read/write API-lykli til klienthliða framleiðsluumhverfa.

Einnig munum við bæta við tveimur umhverfisbreytum til viðbótar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði fyrir staðsetningu. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem strengirnir þínir verða geymdir, til dæmis slóð vefsíðunnar þinnar. Lestu nánar um upprunana hér.

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

Skref 3: Uppsetning á TacoTranslate

Til að samþætta TacoTranslate við umsóknina þína þarftu að búa til viðskiptavin með API-lyklunum sem þú bjóst til áðan. Til dæmis búðu 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 í aðskildri skrá gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðnu /pages/_app.tsx, bætum við 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 framlengdu skilgreininguna með eiginleikum og kóða að ofan.

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

TacoTranslate gerir kleift að nota þjónsíðugerð fyrir þýðingar þínar. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að birta fyrst stutta sýn af óþýddu efni. Auk þess getum við sleppt netbeiðnum í vafranum, því við höfum þ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íðurnar þínar. Til þess munt þú nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þörfum.

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

Til að nota annaðhvort fallið á síðu, skulum við gera ráð fyrir að þú hafir síðu-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!"/>;
}

Nú ættir þú að geta notað Translate íhlutann til að þýða strengina í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Setja í dreifingu og prófa!

Þetta er búið! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir einhverjum strengjum við Translate íhlut. Athugaðu að aðeins umhverfi með read/write heimildir á API-lyklinum munu geta búið til nýja strengi til þýðingar. Við mælum með að þú hafir lokað og öruggt staging-umhverfi þar sem þú getur prófað framleiðsluforritið þitt með slíkan API-lykil og bætt við nýjum strengjum áður en farið er í beinni útsendingu. Þetta mun koma í veg fyrir að einhver steli leyndu API-lyklinum þínum, og mögulega stækka þýð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!