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

Hvernig það virkar

Því meira sem heimurinn verður hnattvæðari, því mikilvægara er fyrir vefþróunaraðila að búa til forrit sem geta mætt þörfum notenda frá mismunandi löndum og menningarheimum. Einn 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 dagsetningaformum.

Í þessari námsleiðbeiningu munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarrenderun. TL;DR: Sjáðu 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ð útfæra 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 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 frelsar þig frá leiðinlegri stjórnun JSON-skráa.

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

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-reikning, þýðingarverkefni og tengda API-lykla. Stofna 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 við .env skrá í rót verkefnisins þíns.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að hinn leynilegi read/write API-lykill lekist aldrei til framenda í framleiðsluumhverfi.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóði fyrir staðsetningu (locale). Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „mappa“ þar sem textastrengirnir þí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: Setja upp TacoTranslate

Til að samþætta TacoTranslate við forritið þitt þarftu að búa til viðskiptavin sem notar API-lyklana sem þú settir upp áð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 í aðskildri skrá gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðnum /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 þú hefur nú þegar sérsniðin pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikunum og kóðanum hér að ofan.

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

TacoTranslate gerir kleift að framkvæma þjónustuhliðarrenderun á þýðingunum þínum. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að notandinn sjái fyrst skammvinnt óþýtt efni. Auk þess getum við sleppt netbeiðnum á viðskiptavinshliðinni, því við höfum þegar allar þýð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ð uppsetninguna þína. Ef true, mun TacoTranslate birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða uppsetningarumhverfi (isProduction is false), munum við nota leynilegan read/write API-lykil til að tryggja að nýir strengir séu sendir til þýðingar.

Hingað til 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 þörfum.

Þessar föll taka þrjú rök: einn Next.js Static Props Context hlutur, stillingar fyrir TacoTranslate og valkvæðir Next.js-eiginleikar. Athugaðu að revalidate hjá getTacoTranslateStaticProps er stillt á 60 sem sjálfgefið, svo þýðingar þínar haldist uppfærðar.

Til að nota annað hvort fall á síðu, gerum 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!"/>;
}

Nú ættirðu 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!

Allt er klárt! Next.js-forritið þitt verður nú þýtt sjálfkrafa þegar þú bætir við hvaða strengi sem er í Translate íhlut. Athugið að aðeins umhverfi með read/write réttindum á API-lykli munu 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ðsluumsóknina með slíkan API-lykil og bætt við nýjum strengjum áður en farið er í framleiðslu. Þetta kemur í veg fyrir að einhver steli leynilega API-lyklinum þínum og mögulega fylli þýðingarverkefnið þitt 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!