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

Þegar heimurinn verður sífellt hnattrænni er það sífellt mikilvægara fyrir vefþróunaraðila að búa til forrit sem geta þjónustað notendur úr mismunandi löndum og menningarheimum. Einn af lykilleiðunum til að ná þessu er alþjóðavæðing (i18n), sem gerir þér kleift að laga forritið þitt að mismunandi tungumálum, gjaldmiðlum og dagsetningasniðum.

Í þessum leiðbeiningum munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt, með 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, sjáðu þessar leiðbeiningar í staðinn.

Skref 1: Settu upp i18n-bókasafn

Til að innleiða alþjóðavæðingu í Next.js-forritið þitt 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 sjálfkrafa strengina þína yfir á öll tungumál með háþróaðri gervigreind og losar þig við leiðinlega umsjón JSON-skráa.

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

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 viðeigandi API-lykla. Búðu til reikning hér. Þetta er ókeypis og krefst ekki þess að þú gefir upp greiðslukort.

Í notendaviðmótinu hjá 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 vista þá 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ð leka aldrei hinum duldna read/write API-lykli í framleiðsluumhverfum á viðskiptavinahlið.

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

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

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

Skref 3: Uppsetning TacoTranslate

Til að samþætta TacoTranslate við forritið þitt þarftu að búa til client með API-lyklunum sem þú bjóst til áður. 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ð því að nota sérsniðið /pages/_app.tsx, munum við bæta við TacoTranslate provider.

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ð þeim eiginleikum og þeim kóða sem sýndir voru hér að ofan.

Skref 4: Innleiðing þjónustuhliðarrenderunar

TacoTranslate gerir kleift að rendera þýðingar á þjóninum. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að notendur sjái fyrst flökt af óþýddu efni. Auk þess er hægt að sleppa netbeiðnum í viðskiptavininum, því við höfum þegar allar þýðingar sem þarf.

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 passi við uppsetningu þína. Ef true, mun TacoTranslate sýna opinbera API-lykilinn. 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.

Fram til þessa 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 kröfum þínum.

Þessi föll taka þrjár færibreytur: 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 þýðingar þí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!"/>;
}

Þú æ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 klárt! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við einhverjum strengjum í Translate íhlut. Athugaðu að aðeins umhverfi sem hafa read/write heimildir fyrir API-lykilinn 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 það fer í framleiðslu. Þetta mun koma í veg fyrir að einhver steli leynilegum API-lykli þínum og að þýðingarverkefnið þitt verði óþarfa útvíkkað með nýjum, óskyldum strengjum.

Vertu viss um að skoða fullkomna dæmið á GitHub-prófílnum okkar. Þar finnurðu einnig dæmi um hvernig á að gera þetta með App Router! Ef þú lendir í einhverjum vandræðum, ekki hika við að hafa samband, og við hjálpum þér fúslega.

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