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

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

Í þessari kennslu munum við kanna hvernig á að bæta alþjóðavæðingu við React Next.js forritið þitt, með þjónustu á hlið netþjóns. TL;DR: Sjáðu dæmi í heild sinni 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ísi í staðinn.

Skref 1: Settu upp i18n bókasafn

Til að innleiða alþjóðavæðingu í Next.js-forritinu þínu veljum við fyrst 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 sjálfkrafa strengina þína á hvaða tungumál sem er með nýjustu gervigreindartækni og losar þig við leiðinlega 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 upp mótullinn er kominn tími til að stofna TacoTranslate reikning, þýðingarverkefni og tengda API lykla. Búðu til reikning hér. Það er ókeypis, og krefst ekki að þú sért með kreditkort.

Í notendaviðmóti TacoTranslate forritsins, búðu til verkefni og farðu í API keys flipann. Búðu til eina read lyklu og eina read/write lyklu. Við munum vista þær sem umhverfisbreytur. read lyklinn er það sem við köllum public og read/write lyklinn er 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 hinum leyndu read/write API-lyklinum í framleiðsluumhverfi hjá viðmóti viðskiptavinar.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið varalausarmálssvæði. Í þessu dæmi setjum við það á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengi þínir verða geymdir, eins og slóðin á vefsíðunni þinni. Lestu meira um origins 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 viðskiptavininn í sér skrá gerir það auðveldara að nota hann aftur síðar. Nú, með því að nota sérsniðna /pages/_app.tsx, munum við bæta við TacoTranslate þjónustuaðilanum.

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 nú þegar með sérsniðin pageProps og _app.tsx, vinsamlegast bættu skilgreiningunni við með eiginleikunum og kóðanum frá ofan.

Skref 4: Innleiðing á server side rendering

TacoTranslate gerir kleift að keyra þýðingar á þjónustuhliðinni. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að birta óþýtt efni tímabundið fyrst. Að auki getum við sleppt netbeiðnum á viðskiptavininum, því við höfum þegar öll þýðingarnar 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.

Frá þessu hefur þú 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 þínum þörfum.

Þessar aðgerðir taka þrjá færibreytur: Eitt Next.js Static Props Context hlut, stillingar fyrir TacoTranslate, og valfrjáls Next.js eiginleikar. Athugaðu að revalidate á getTacoTranslateStaticProps er stillt á 60 sem sjálfgefið, svo að þýðingar þínar haldist uppfærðar.

Til að nota hvoruga aðgerðina á síðu, förum við út frá því að þú eigir 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 textastrauma í öllum React íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Settu af stað og prófaðu!

Við erum búin/n! React forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við hvaða strengjum sem er í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write réttindi á 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, bætt við nýjum strengjum áður en farið er í beinu útsendingu. Þetta kemur í veg fyrir að einhver steli dulmálalykli þí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 fullkomna dæmið á GitHub prófílnum okkar. Þar finnur þú einnig dæmi um hvernig á að gera þetta með App Router ! Ef þú lendir í vandræðum, ekki hika við að hafa samband, og við hjálpum þér með ánægju.

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