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

Hvernig það virkar

Um leið og heimurinn verður alþjóðavæddari verður sífellt mikilvægara fyrir vefþróunaraðila að byggja forrit sem geta þjónað notendum frá mismunandi löndum og menningarheimum. Ein af lykilliðunum til að ná þessu markmiði er alþjóðavæðing (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 bæta má alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarröðun (server side rendering). TL;DR: Sjáðu fulla dæmið hér.

Þessi leiðarvísir er fyrir Next.js forrit sem nota Pages Router.
Ef þú notar 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 munum við fyrst velja i18n bókasafn. Það eru til 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 yfir á hvaða tungumál sem er með nýjustu gervigreind og frelsar þig frá þreytandi meðhöndlun JSON skrár.

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 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ð slá inn kreditkortaupplýsingar.

Innan TacoTranslate forritsins skaltu búa til verkefni og fara í flipa sem heitir API lyklar. 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 við sem skrá .env í rót verkefnisins þíns.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei leynilega read/write API lyklinum til framleiðsluumhverfa á viðskiptavinahlið.

Við munum einnig bæta við tveimur fleiri umhverfisbreytum: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varasvæðiskóði. Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengirnir þínir verða vistaðir, til dæmis slóð 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 viðskiptavin með því að nota API lyklana frá því áð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ð búa til client í sérskrá gerir það auðveldara að nota aftur síðar. Nú, með því að nota sérsniðið /pages/_app.tsx, munum við bæta við TacoTranslate veitunni.

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ð eiginleikum og kóða frá ofan.

Skref 4: Innleiðing þjónustuhliðarrendrunar

TacoTranslate gerir kleift að birta þýðingar þínar á netþjónshlutanum. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að birta ósamþýtt efni í smá stund fyrst. Að auki getum við sleppt netbeiðnum í viðmótinu þar sem við eigum nú þ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 ávísuninni til að henta uppsetningunni þinni. Ef truemun TacoTranslate birta opinbera API lykilinn. Ef við erum í staðbundnu, prófunar- eða sviðsetningarumhverfi (isProduction is false) notum við leynilegan read/write API lykilinn 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 af studdum tungumálum. 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 aðgerðir taka þrjár breytur: Eitt Next.js Static Props Context hlut, stillingar fyrir TacoTranslate, og valfrjálsar Next.js eigindir. Athugaðu að revalidate á getTacoTranslateStaticProps er sett á 60 sem sjálfgefið, til að þýðingar þínar haldist uppfærðar.

Til að nota hvoru tveggja aðgerðina á 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!"/>;
}

Þú ættir nú að geta notað Translate íhlutann til að þýða textastrengi innan allra React íhlutanna þinna.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Settu í dreifingu og prófaðu!

Við erum búin/n! Next.js forritið þitt mun nú sjálfkrafa þýða þegar þú bætir við einhverjum röðum í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write leyfi fyrir API-lykilinn munu geta búið til nýjar strengjar til þýðingar. 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 farið er í loftið. Þetta mun koma í veg fyrir að einhver steli leynilega API-lykli þínum og mögulega stækki þýðingarverkefnið þitt með 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 í einhverjum vandræðum, ekki hika við að hafðu samband, og við munum gjarnan aðstoða þig.

TacoTranslate gerir þér kleift að staðfæra React-forritin þín sjálfkrafa fljótt til og frá hvaða tungumáli sem er. Byrjaðu í dag!