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

Þegar heimurinn verður sífellt hnattvæðari er æ mikilvægara fyrir vefþróunaraðila að byggja forrit sem geta þjónustað notendur 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ð mismunandi tungumálum, gjaldmiðlum og dagsetningarformum.

Í þessari leiðbeiningu munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt með þjónsíðubundinni birtingu. TL;DR: Sjá fullt dæmi hér.

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

Skref 1: Settu upp i18n-bókasafn

Til að innleiða alþjóðavæðingu í Next.js-forritinu þínu munum 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 textana þína yfir á öll tungumál með háþróaðri gervigreind og frelsar þig frá leiðinlegri meðhöndlun JSON-skráa.

Við skulum setja þ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 komið að því að búa til TacoTranslate-reikninginn þinn, þýðingarverkefni og tengda API-lykla. Stofnaðu reikning hér. Það er ókeypis, og krefst ekki þess að þú leggir inn kreditkort.

Í 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. read lykillinn er það sem við köllum public og read/write lykillinn er secret. Til dæmis gætir þú 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 API-lykli read/write í framleiðsluumhverfi á viðskiptavinahlið.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið varasvæðiskóði (locale). Í þ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. Lesa meira um uppruna 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 áð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 í sérstöku skjali gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðnu /pages/_app.tsx, munum við bæta TacoTranslate provider-inum við.

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ðna pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikum og kóðanum hér að ofan.

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

TacoTranslate gerir kleift að birta þýðingar á þjóninum. Þetta bætir notendaupplifunina verulega því þýtt efni er sýnt strax, í stað þess að birta fyrst stutta glampa af óþýddu efni. Auk þess getum við sleppt netbeiðnum í vafranum, þar sem okkur eru þegar til allar þýðingar sem við þurfum.

Við byrjum á 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 uppsetningu þinni. Ef true, mun TacoTranslate birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða sviðssetningarumhverfi (isProduction is false), munum við nota leynilega read/write API-lykilinn til að tryggja að nýir textastrengir séu sendir til þýðingar.

Hingað til höfum við aðeins stillt Next.js-forritið með lista yfir tungumál sem það styður. Næst munum við sækja þýðingar fyrir allar síðurnar þínar. Til þess skaltu nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þörfum þínum.

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

Til að nota annað hvort fallið í síðu skulum við gera ráð fyrir að þú eigir síðu 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: Settu í framleiðslu og prófaðu!

Við erum búnir! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við strengjum í Translate íhlut. Athugaðu að aðeins umhverfi með read/write réttindum á API-lykli mun geta búið til nýja strengi til þýðingar. Við mælum með að þú hafir lokað og öruggt prófunarumhverfi (staging environment) þar sem þú getur prófað framleiðsluforritið þitt með slíkan API-lykil og bætt við nýjum strengjum áður en þú ferð í framleiðslu. Þetta mun koma í veg fyrir að einhver steli leynilykli þínum og hugsanlega fylla þýðingarverkefnið þitt af nýjum, ótengdum strengjum.

Vertu viss 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 þú rekst á einhver vandamál, ekki hika við að hafa 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!