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

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

Í þessari leiðbeiningu munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt með framsetningu á þjónsíðunni. TL;DR: Sjá dæmið í heild 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-forritið þitt, byrjum við á því að velja i18n-bókasafn. Það eru nokkur vinsæl bókasöfn, þar á meðal next-intl. Hins vegar munum við í þessu dæmi nota TacoTranslate.

TacoTranslate þýðir strengina þína sjálfkrafa á hvaða tungumál sem er með háþróaðri gervigreind og frelsar þig frá þreytandi stjórnun JSON-skráa.

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ódulinn er komið að því að búa til TacoTranslate-reikninginn þinn, þýðingarverkefni og tilheyrandi API-lykla. Stofnaðu reikning hér. Það er ókeypis og krefst ekki þess að þú gefir upp kreditkortanúmer.

Inni í notendaviðmóti TacoTranslate-forritsins, 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. Sá read lykill er það sem við köllum public og sá read/write lykill 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ð leka aldrei hinum leynilega read/write API-lykli í framleiðsluumhverfi á viðskiptavinshlið.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði fyrir staðarmál. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem textastrengirnir þínir verða geymdir, til dæmis vefslóð vefsíðunnar þinnar. Lestu meira um uppruna hér.

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

Skref 3: Að setja upp TacoTranslate

Til að samþætta TacoTranslate við forritið þitt þarftu að búa til client sem notar API-lyklana sem þú bjóst til áðan. Til dæmis, búðu til skrána /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 viðskiptavininn í aðskildri skrá gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðuðu /pages/_app.tsx, munum við bæta 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ð eiginleikunum og kóðanum hér að ofan.

Skref 4: Innleiðing á þjónsíðusýningu

TacoTranslate gerir kleift að framkvæma þjónustuhliðarrenderingu á þýðingunum þínum. Þetta bætir notendaupplifun verulega með því að sýna þýtt efni strax, í stað þess að fyrst birtist óþýtt efni í stutta stund. Að auki getum við sleppt netbeiðnum á viðskiptavinshliðinni, þ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'),
	});
};

Breyttu isProduction athuguninni svo hún henti uppsetningunni þinni. Ef true, mun TacoTranslate birta opinan API-lykil. Ef við erum í staðbundnu, prófunar- eða staging-umhverfi (isProduction is false), munum við nota leynda read/write API-lykilinn til að tryggja að nýir strengir séu sendir til þýðingar.

Hingað til höfum við aðeins stillt 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álsir 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, gerum við ráð fyrir að þú hafir síðuskrá 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ú að geta notað Translate íhlutinn til að þýða strengi í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

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

Það er búið! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir hvaða strengjum sem er við Translate íhlut. Athugaðu að einungis umhverfi með read/write heimildum á API-lykli 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íkan API-lykil og bætt við nýjum strengjum áður en farið er í framleiðslu. Þetta mun koma í veg fyrir að einhver steli leynilegum API-lykli þínum og mögulega þenja þýðingarverkefnið þitt með því að bæta við nýjum, ótengdum strengjum.

Gakktu úr skugga um að skoða fullkomna dæmið á GitHub-prófílnum okkar. Þar finnur þú líka dæmi um hvernig á að gera þetta með App Router! Ef þú rekst á einhver vandamál, ekki hika við að hafðu samband, við hjálpum þér gjarnan.

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