Hvernig á að útfæra alþjóðavæðingu í Next.js forriti sem notar Pages Router

Þar sem heimurinn verður sífellt alþjóðlegri, er það æ mikilvægara fyrir vefþróunaraðila að byggja upp forrit sem geta þjónustað notendur frá mismunandi löndum og menningarheimum. Einn af lykilatriðunum til að ná þessu fram er alþjóðavæðing (i18n), sem gerir þér kleift að aðlaga forritið þitt að mismunandi tungumálum, gjaldmiðlum og dagsetningasniðum.

Í þessari leiðbeiningu munum við kanna hvernig á að bæta 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 þú ert að nota App Router, skoðaðu þá þessa 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 sjálfkrafa textana þína yfir á hvaða tungumál sem er með nýjustu gervigreind, og frelsar þig frá leiðinlegri meðhöndlun JSON skráa.

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 viðbótina 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 þarf ekki að bæta við kreditkorti.

Innan málmennisins á TacoTranslate umsóknarviðmóti, búðu til verkefni og farðu í API lykla flipann hennar. 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ð leka aldrei leynilega read/write API lykli til framleiðsluumhverfis á viðskiptavinahliða.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið staðbundið tungumál. Í þessu dæmi setjum við það á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappan“ þar sem strengirnir þínir verða geymdir, eins og slóð vefsíðu þinnar. Lestu meira um origin hér.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Skref 3: Að setja upp TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 í 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 þú átt þegar sérsniðin pageProps og _app.tsx, vinsamlegast lengdu skilgreininguna með eiginleikunum og kóðanum frá ofan.

Skref 4: Innleiðing á miðlara-hlið birtingu

TacoTranslate gerir kleift að vinna þýðingar þínar á þjónustuhliðinni. Þetta bætir notendaupplifunina verulega með því að sýna þýddan texta strax, í stað þess að birta fyrst óþýddan texta í skammdegisglampa. Að auki getum við sleppt netbeiðnum á viðskiptavinshliðinni, þar sem við höfum þegar allar þýðingar sem við þurfum.

Við byrjum á 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.

Hingað til höfum við aðeins sett upp 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 að gera það notarðu annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps byggt á kröfum þínum.

Þessar aðgerðir taka þrjú rök: Einn Next.js Static Props Context hlut, stillingar fyrir TacoTranslate og valfrjálsa Next.js eiginleika. Athugaðu að revalidate á getTacoTranslateStaticProps er sjálfgefið stillt á 60, þannig að þýðingarnar þínar haldast uppfærðar.

Til að nota aðra hvora aðgerðina á síðu skulum við gera 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

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

Við erum búin! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við hvaða strengingum sem er í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write leyfi á API lykli geta búið til nýjar strengingar til þýðingar. Við mælum með að hafa lokað og öruggt staging-umhverfi þar sem þú getur prófað framleiðsluforritið þitt með API lykli eins og þessum, og bætt við nýjum strengjum áður en farið er í beinu útsendingu. Þetta mun koma í veg fyrir að nokkur steli leynilega API lykli þínum og mögulega stækka þýðingarverkefnið þitt með því að bæta við nýjum, ótengdum strengjum.

Gakktu úr skugga um að skoða heildardæ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 vera meira en fús til að aðstoða.

TacoTranslate gerir þér kleift að þýða React-forritin þín sjálfkrafa hraðar til og frá hvaða tungumáli sem er. Byrjaðu í dag!