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

Því meira sem heimurinn verður hnattvæðari, því mikilvægara er fyrir vefhönnuði að byggja forrit sem geta mætt þörfum notenda frá mismunandi löndum og menningarheimum. Ein af lykilleiðunum til að ná því markmiði er alþjóðavæðing (i18n), sem gerir þér kleift að aðlaga forritið þitt að mismunandi tungumálum, gjaldmiðlum og dagsetningarsniðum.

Í þessum kennsluvefskóla munum við kanna hvernig bæta má alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarrendu. TL;DR: Sjáðu fulla dæmið hér.

Þessi leiðarvísir er fyrir Next.js forrit sem nota Pages Router.
Ef þú notar App Router, vinsamlegast skoðaðu þennan leiðarvísi í 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, meðal annars next-intl. Hins vegar munum við nota TacoTranslate í þessu dæmi.

TacoTranslate þýðir textana þína sjálfkrafa yfir á hvaða tungumál sem er með því að nota nýjustu gervigreindartækni, og losar þig við þreytandi meðhöndlun JSON-skráa.

Við skulum setja það upp með npm í skipanalínunni þinni:

npm install tacotranslate

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

Nú þegar þú hefur sett inn modulinn, 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 krefst ekki þess að þú setjir inn kreditkort.

Innan TacoTranslate forritsins skaltu búa til verkefni og fara í flipa sem heitir API lyklar. Búðu til einn read lykil og einn read/write lykil. Við munum vista þá sem umhverfisbreytur. read lyklinum er einnig vísað til sem public og read/write lykillinn er kallaður secret. Til dæmis gætir þú bætt þeim við .env skrá í rót verkefnisins þíns.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei leynilega read/write API lyklinum í framleiðsluumhverfi fyrir skjákökuna.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn staðgengill staðar. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengir þínir verða geymdir, svo sem slóð vefsíðu þinnar. Lestu meira um origin 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 lykilunum sem þú fékkst áð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 í sér skrá gerir það auðveldara að nota aftur síðar. Nú, með því að nota sérsniðið /pages/_app.tsx, bæti 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 lengdu skilgreininguna með eiginleikum og kóðanum frá ofan.

Skref 4: Innleiða þjónustuhliðarrenderun

TacoTranslate gerir kleift að birta þýðingar þínar á þjónustuhliði. Þetta bætir notendaupplifunina talsvert með því að sýna þýtt efni strax, í stað þess að birta fyrst glampa af óþýddu efni. Að auki getum við sleppt netbeiðnum á viðskiptavininn þar sem 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 passi við uppsetningu þína. Ef true er, mun TacoTranslate sýna opinbera API lykilinn. Ef við erum í staðbundnu, prófunar- eða undirbúningsumhverfi (isProduction is false), munum við nota leynda read/write API lykilinn til að tryggja að nýjar strengir séu sendir til þýðingar.

Þangað til nú höfum við aðeins sett upp Next.js forritið með lista af studdum tungumálum. 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 þörfum.

Þessar aðgerðir taka þrjú rök: Einn Next.js Static Props Context hlut, stillingar fyrir TacoTranslate, og valfrjálar Next.js eiginleikar. Athugið að revalidate á getTacoTranslateStaticProps er stillt á 60 sem sjálfgefið, svo þýðingarnar þínar haldist uppfærðar.

Til að nota hvor aðgerðina í 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 íhlutann til að þýða strengina innan allra React íhluta þinna.

import {Translate} from 'tacotranslate/react';

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

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

Við erum búin! React-forritið þitt verður nú þýtt sjálfkrafa þegar þú bætir við einhverjum strengjum í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write leyfi á API-lyklinum munu geta búið til nýja strengi til þýðingar. Við mælum með að hafa lokað og öruggt stigunarumhverfi þar sem þú getur prófað framleiðsluútgáfu forritsins með slíkan API-lykil, bætt við nýjum strengjum áður en farið er í loftið. Þetta mun koma í veg fyrir að einhver steli dulmálalyklinum þínum og mögulega stækki þýðingarverkefnið þitt með því að bæta við nýjum, ótengdum strengjum.

Gakktu úr skugga um að skoða fulla 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ð hjálpum þér með gleði.

TacoTranslate gerir þér kleift að staðfæra React forritin þín sjálfkrafa hratt til og frá hvaða tungumáli sem er. Byrjaðu í dag!