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

Hvernig það virkar

Þegar heimurinn verður sífellt hnattvæddari verður það æ mikilvægara fyrir vefþróunaraðila að búa til forrit sem geta sinnt notendum úr ólíkum 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.

Í þessu kennsluefni munum við skoða hvernig bæta má alþjóðavæðingu við React Next.js-forritið þitt með þjónahliðarrenderun. TL;DR: Sjá dæmið í heild 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 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 gervigreindartækni og losar þig undan leiðinlegri umsýslu 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 módúlinn 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-forritsins, búðu til verkefni og farðu á flipann fyrir API-lykla þess. 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

Gakktu úr skugga um að leka aldrei leynilega read/write API-lykli í framleiðsluumhverfi á viðskiptavinshlið.

Við munum einnig bæta við tveimur 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 strengir þínir verða geymdir, til dæmis vefslóð vefsíðunnar þinnar. Lestu 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 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 forritsklient í sérskrá gerir það auðveldara að nota hann aftur síðar. Nú, með því að nota sérsniðið /pages/_app.tsx, munum við bæta við TacoTranslate provider.

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ðið pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikunum og kóðanum hér að ofan.

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

TacoTranslate gerir kleift að nota server-side rendering fyrir þýðingar þínar. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að notandinn sjái fyrst stuttan glampa af óþýddu efni. Enn fremur getum við sleppt netbeiðnum á viðmótinu, þ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 passi við uppsetningu þína. Ef true, mun TacoTranslate birta opinbera API-lykilinn. Ef við erum í staðbundnu, prófunar- eða stigunarumhverfi (isProduction is false), munum við nota leynda read/write API-lykilinn 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 að gera það notar þú annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum þörfum.

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

Til að nota annað hvort fallið á síðu, gerum við ráð fyrir að þú sért með 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!"/>;
}

Nú ættir þú að geta notað Translate íhlutinn til að þýða texta í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

Skref 5: Setja í framleiðslu og prófa!

Allt klárt! Forritið þitt í Next.js verður nú þýtt sjálfkrafa þegar þú bætir við strengjum í Translate íhlut. Athugaðu að aðeins umhverfi með read/write heimildum á API-lyklinum 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ðsluútgáfu forritsins með slíkum API-lykli og bætt við nýjum strengjum áður en farið er í framleiðslu. Þetta mun koma í veg fyrir að einhverjum takist að stela leyndum API-lykli þínum og hugsanlega þenja út þýð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!