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

Hvernig það virkar

Eftir því sem heimurinn verður hnattvæddur, verður það sífellt mikilvægara fyrir vefþróunaraðila að búa til forrit sem geta mætt þörfum notenda frá ólíkum löndum og menningarheimum. Einn af lykilatriðum 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 dagsetningaformum.

Í þessari kennslu munum við skoða hvernig bæta megi alþjóðavæðingu við React Next.js-forritið þitt með þjónhliðarröðun. TL;DR: Sjáðu heildardæmið hér.

Þessi leiðarvísir er ætlaður Next.js-forritum 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-forritið þitt 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 sjálfvirkt strengina þína á hvaða tungumál sem er með háþróaðri gervigreind og losar þig undan leiðinlegri umsjón með JSON-skrám.

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

npm install tacotranslate

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

Nú þegar þú hefur sett upp viðbótina er komið að því að stofna TacoTranslate‑reikninginn þinn, þýðingarverkefni og tilheyrandi API‑lykla. Stofnaðu reikning hér. Það er ókeypis og krefst ekki kreditkorts.

Í notendaviðmóti TacoTranslate, 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

Gætið þess að leka aldrei leynilega read/write API-lyklinum í viðskiptavinahlið framleiðsluumhverfisins.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði (fallback) fyrir svæðisstillingu. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappan“ þar sem strengirnir þínir verða geymdir, til dæmis vefslóð 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 sem notar API-lykla sem þú bjóst til áður. Til dæmis búðu til skrána /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 klientinn í sérstöku 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 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óða að ofan.

Skref 4: Innleiðing þjónsíðubundinnar renderingar

TacoTranslate styður þjónsíðubirtun á þýðingum þínum. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni samstundis, í stað þess að birta fyrst stutta glampa af óþýddu efni. Að auki getum við sleppt netbeiðnum á viðskiptavinahlið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 til að henta uppsetningu þinni. Ef true, mun TacoTranslate birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða staging-umhverfi (isProduction is false), munum við nota leynilega read/write API-lykilinn til að tryggja að nýir strengir séu sendir til þýðingar.

Hingað til höfum við aðeins sett upp Next.js-forritið með lista yfir tungumál sem eru studd. Næst munum við sækja þýðingar fyrir allar síður ykkar. Til þess munuð þið nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þörfum ykkar.

Þ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, þannig að þýðingarnar þínar haldist uppfærðar.

Til að nota annað hvort fallið í síðu, skulum við gera ráð fyrir að þú hafir 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 strengina í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Settu upp og prófaðu!

Það er búið! Next.js-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 fyrir API-lykilinn geta búið til nýja strengi til þýðingar. Við mælum með að hafa lokað og öruggt prófunarumhverfi þar sem þú getur prófað framleiðsluforritið þitt með slíku API-lykli og bætt við nýjum strengjum áður en farið er í framleiðslu. Þetta kemur í veg fyrir að einhver steli leynilegum API-lykli þínum og að þýðingarverkefnið þitt fyllist af 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!