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

Hvernig það virkar

Eins og heimurinn verður æ hnattvæðari er sífellt mikilvægt fyrir vefþróunaraðila að búa til forrit sem geta þjónustað notendur frá mismunandi löndum og menningarheimum. Eitt af helstu leiðunum til að ná þessu er alþjóðavæðing (i18n), sem gerir þér kleift að aðlaga forritið að ólíkum tungumálum, gjaldmiðlum og dagsetningaformum.

Í þessu námskeiði munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt, með þjónsíðurendingu. 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ísi í 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, í þessu dæmi munum við nota TacoTranslate.

TacoTranslate þýðir sjálfkrafa strengina þína yfir á hvaða tungumál sem er með nýjustu gervigreind og losar þig við leiðinlega meðhöndlun JSON-skráa.

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ð búa til TacoTranslate-reikninginn þinn, þýðingarverkefni og tengda API-lykla. Búðu til reikning hér. Það er ókeypis, og þú þarft ekki að gefa upp kreditkort.

Í 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

Passaðu að leka aldrei leynilega read/write API-lykli á viðskiptavinahlið í framleiðsluumhverfum.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði fyrir staðsetningu. Í þessu dæmi setjum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem strengirnir þínir verða vistaðir, 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ð samþætta TacoTranslate við forritið þitt þarftu að búa til client sem notar API-lyklana sem þú bjóst til áður. Til dæmis skaltu búa 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 client-inn í sérskrá gerir það auðveldara að nota hann aftur síðar. Nú, með því að nota sérsniðið /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ðin pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikunum og kóðanum hér að ofan.

Skref 4: Innleiðing þjónhliðarrenderingar

TacoTranslate gerir kleift að framkvæma þjónarendun á þýðingunum þínum. Þetta bætir notendaupplifunina verulega þar sem þýtt efni birtist samstundis í stað þess að fyrst sjái notandinn skammvinnar birtingu óþýdds efnis. Enn fremur 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 birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða staging-umhverfi (isProduction is false), munum við nota leynilegan read/write API-lykilinn til að tryggja að nýjir strengir séu sendir til þýðingar.

Fram til þessa höfum við aðeins stillt Next.js-forritið með lista yfir studd tungumál. 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 kröfum.

Þessi föll taka þrjú viðföng: 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 þínar haldist uppfærðar.

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

import {Translate} from 'tacotranslate/react';

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

Skref 5: Birta og prófa!

Við erum búin! Next.js-forritið þitt mun nú sjálfkrafa verða þýtt þegar þú bætir við strengjum í Translate íhlut. Athugaðu að aðeins umhverfi með read/write heimildir á API-lykli muni geta búið til nýja strengi til þýðinga. Við mælum með að hafa lokað og öruggt stigunarumhverfi þar sem þú getur prófað framleiðsluforritið þitt með slíkan API-lykil og bætt við nýjum strengjum áður en það fer í útgáfu. Þetta mun koma í veg fyrir að einhver einhver steli leynilegan API-lykli þínum, og hugsanlega stækka þýðingarverkefnið þitt 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!