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

Hvernig það virkar

Eins og heimurinn verður sífellt alþjóðlegri, er það æ mikilvægara fyrir vefþróunaraðila að byggja upp forrit sem geta þjónað notendum frá mismunandi löndum og menningarheimum. Einn lykilatriði 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 dagsetningarformum.

Í þessu kennsluefni munum við kanna hvernig á að bæta alþjóðavæðingu við React Next.js forritið þitt með þjónustuhliðarrenderingu. TL;DR: Sjáðu dæmið í heild sinni 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 munum við í þessu dæmi nota TacoTranslate.

TacoTranslate þýðir strengina þína sjálfvirkt yfir á hvaða tungumál sem er með nýtískulegri gervigreind, og leysir þig undan leiðinlegri meðhöndlun JSON skrár.

Við skulum setja það upp með því að nota npm í skelinni þinni:

npm install tacotranslate

Skref 2: Búðu til ókeypis TacoTranslate aðgang

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

Innan TacoTranslate forritsviðmótsins, búðu til verkefni og farðu í API lykla flipann. 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 við .env skrá í rótaskrá verkefnisins.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei leynilega read/write API lykli til framleiðsluumhverfa við viðskiptavininn.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefinn varnarstaðarkóði. Í þessu dæmi setjum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengir þínir verða geymdir, til dæmis slóð vefsíðunnar þinnar. Lestu meira um origin 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ð því að nota API lykla frá fyrr. 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 fljótlega.

Að búa til viðskiptavininn í sér skrá gerir það auðveldara að nota hann aftur síðar. Nú, með því að nota sérsniðna /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 á miðlungs úrvinnslu (server side rendering)

TacoTranslate gerir kleift að birta þýðingar þínar á þjónustuhliðinni. Þetta bætir notendaupplifun til muna með því að sýna þýtt efni strax, í stað þess að sýna fyrst glampa af óþýddu efni. Að auki getum við sleppt netbeiðnum hjá viðskiptavininum þar sem 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 til að henta uppsetningu þinni. Ef true er, mun TacoTranslate sýna almenna API lykilinn. Ef við erum í staðbundnu, prófunar- eða undirbúningarumhverfi (isProduction is false), munum við nota leynilega 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. Það næsta sem við gerum er að sækja þýðingar fyrir allar síðurnar þínar. Til þess munt þú nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum þörfum.

Þessar föll taka þrjá röksemdir: Eitt Next.js Static Props Context hlut, stillingar fyrir TacoTranslate, og valfrjálsar Next.js eiginleikar. Athugaðu að revalidate á getTacoTranslateStaticProps er sett á 60 sem sjálfgefinn gildið, svo að þýðingarnar þínar haldist uppfærðar.

Til að nota annað hvort fallið á 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ð vera fær um að nota Translate íhlutinn til að þýða strengjið í öllum React íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

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

Við erum búin(n)! Next.js forritið þitt mun nú sjálfkrafa þýða þegar þú bætir við hvaða strengjum sem er í 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í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 lyklinum þínum og mögulega metti þýðingarverkefnið þitt með 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!