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

Hvernig það virkar

Þar sem heimurinn verður sífellt hnattvæddari er það mikilvægara fyrir vefþróunaraðila að búa til forrit sem geta mætt þörfum notenda frá mismunandi löndum og menningarheimum. Ein af lykilleiðunum til að ná þessu fram er gegnum alþjóðavæðingu (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 á að bæta alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarröðun. TL;DR: Sjáðu fulla dæmið hér.

Leiðarvísirinn er ætlaður 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 byrjum við á að 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 AI-tækni, og losar þig við það leiðinlega viðhald JSON-skráa.

Við skulum setja það upp með npm í skipanalínu þinni:

npm install tacotranslate

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

Núna þegar þú hefur sett upp viðbótina er kominn tími til að búa til reikning hjá TacoTranslate, þýðingarverkefni og tengd API lykla. Búðu til reikning hér. Það er ókeypis, og krefst ekki að þú setjir inn kreditkort.

Innanhúss í notendaviðmóti TacoTranslate-forritsins, búðu til verkefni og farðu í flipa fyrir API lykla. Búðu til einn read lykil og einn read/write lykil. Við munum vista þá sem umhverfisbreytur. read lykillinn kallast public og read/write lykillinn er secret. Til dæmis gætir þú bætt þeim í .env skrá í rót verkefnisins þíns.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei leynilegum read/write API lykli til viðskiptavinshliðar framleiðsluumhverfa.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varakóðasvæði. Í þessu dæmi setjum við það á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengir þínir verða geymdir, eins og 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 þarft þú að búa til client með API lykla sem fengnir voru áður. Til dæmis, búðu til skrá með nafninu /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 fljótlega.

Að búa til client í sér skrá gerir það auðveldara að nota aftur síðar. Nú, með því að nota sérsniðna /pages/_app.tsx, munum við bæta við TacoTranslate provider-inum.

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ð eiginleikunum og kóðanum hér að ofan.

Skref 4: Innleiða þjónustuhliðarrenderun

TacoTranslate gerir kleift að framkvæma þjónustuhliðarröðun (server side rendering) á þýðingum þínum. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að byrja með óþýtt efni sem birtist fyrstu augnablikin. Að auki getum við sleppt netbeiðnum á vefvið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 á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.

Frá þessu augnabliki 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íðurnar þínar. Til þess geturðu notað annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum þörfum.

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

Til að nota hvoruga aðgerðina á síðu, skulum við gera ráð fyrir að þú eigir 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 í dreifingu og prófaðu!

Við erum búin! Núna mun Next.js forritið þitt sjálfkrafa þýða þegar þú bætir við strengjum í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write aðgangi á API lykilnum 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ðsluútgáfu forritsins með slíkum API lykli, og bætt við nýjum strengjum áður en þú fer í beinu streymi. Þetta mun koma í veg fyrir að einhver steli leynilega API lykli þínum og mögulega ofhlaði þýðingarverkefnið þitt með nýjum, óskyldum 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!