Besta lausnin fyrir alþjóðavæðingu (i18n) í Next.js forritum

Hvernig það virkar

Eins og heimurinn verður sífellt hnattvæddur er það æ mikilvægara fyrir vefþróunaraðila að byggja forrit sem geta mætt notendum frá mismunandi löndum og menningarheimum. Einn af lykilleið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 dagsetningasniðum.

Í þessari leiðsögn munum við kanna hvernig á að bæta alþjóðavæðingu við React Next.js-forritið þitt, með þjónustuhliðarröðun. TL;DR: Sjá fulla dæmið 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-forritinu þínu skulum við fyrst 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 yfir á hvaða tungumál sem er með hjálp nýjustu gervigreindar og losar þig undan leiðinlegri stjórnun JSON-skráa.

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

npm install tacotranslate

Skref 2: Búðu til ókeypis TacoTranslate-aðgang

Nú þegar þú hefur sett upp viðbótina er komið að því að stofna TacoTranslate-reikninginn þinn, þýðingarverkefni og tengda API-lykla. Stofnaðu reikning hér. Það er ókeypis og þú þarft ekki að skrá kreditkort.

Í notendaviðmóti TacoTranslate stofnaðu 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ðu bætt þeim í .env skrá í rót verkefnisins.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tryggðu að hinn leyndi read/write API-lykill leki aldrei út í framleiðsluumhverfi sem keyrir á viðskiptavinshlið.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði fyrir svæði (locale). Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem strengirnir þínir verða geymdir, til dæmis vefslóð vefsíðunnar þinnar. Lesa nánar 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 skaltu búa 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ð að búa til viðskiptavininn í aðskildri skrá gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðnum /pages/_app.tsx, bætum 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ðnar pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikum og kóðanum hér að ofan.

Skref 4: Innleiðing þjónsíðubirtingar

TacoTranslate styður þjónustuhliðarrenderingu þýðinga þinna. Þetta bætir notendaupplifun verulega með því að birta þýtt efni strax, í stað þess að notendur sjái fyrst stuttan glampa af óþýddu efni. Auk þess 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 uppsetningu þinni. Ef true, mun TacoTranslate sýna opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða staging-umhverfi (isProduction is false), notum við leynilegan read/write API-lykil til að tryggja að nýir strengir séu sendir til þýðingar.

Þangað til nú höfum við aðeins stillt Next.js-forritið með lista yfir studd tungumál. Næst munum við sækja þýðingar fyrir allar síðurnar þínar. Til þess notar þú annaðhvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum kröfum.

Þessi föll taka þrjú rök: einn Next.js Static Props Context hlutur, stillingar fyrir TacoTranslate, og valfrjálsar 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, 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: Settu í dreifingu og prófaðu!

Við erum búin! Next.js-umsóknin þín verður nú sjálfkrafa þýdd þegar þú bætir við hvaða strengjum sem er í Translate íhlut. Athugaðu að aðeins umhverfi sem hafa read/write heimildir á API-lyklinum munu geta búið til nýja strengi sem verða þýddir. Við mælum með að hafa lokað og öruggt staging-umhverfi þar sem þú getur prófað framleiðsluumsóknina þína með svona API-lykli og bætt við nýjum strengjum áður en hún fer í framleiðslu. Þetta kemur í veg fyrir að einhver steli leyndum API-lykli þínum og gæti hugsanlega aukið umfang þýðingarverkefnisins með því að bæta við nýjum, ótengdum strengjum.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!