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

Þar sem heimurinn verður sífellt hnattrækari, verður það sífellt mikilvægara fyrir vefþróunaraðila að byggja upp forrit sem geta mætt þörfum notenda frá mismunandi löndum og menningarheimum. Einn af lykilleiðunum til að ná þessu er í gegnum alþjóðavæðingu (i18n), sem gerir þér kleift að aðlaga forritið þitt að mismunandi tungumálum, gjaldmiðlum og dagsetningamótum.

Í þessum kennsluvef munum við kanna hvernig á að bæta alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarrenderun. TL;DR: Skoðaðu 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 verðum við fyrst 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ð háþróaðri gervigreind og léttir þig undan leiðinlegri vinnu við að halda utan um 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óðulinn er kominn tími til að búa til TacoTranslate reikninginn þinn, þýðingarverkefni og tengda API lykla. Búðu til reikning hér. Það er ókeypis, og krefst ekki að þú setjir inn kreditkort.

Innan TacoTranslate forritsins skaltu búa til verkefni og fara í API lykla flipann. 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 þíns.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei leynilega read/write API lyklinum til client-side framleiðsluumhverfa.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið varasvæði tungumáls. Í þessu dæmi munum við stilla það á en fyrir enska.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem strengirnir þínir verða vistaðir, 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 þarftu að búa til client með API lyklunum frá fyrr í ferlinu. 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 innan skamms.

Að búa til client í aðskildri skrá gerir það auðveldara að nota aftur síðar. Nú, með því að nota sérsniðið /pages/_app.tsx, bætum við 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ð eiginleikunum og kóðanum hér að ofan.

Skref 4: Innleiðing á þjónustuhliðar uppsetningu (server side rendering)

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ð byrja með glampa af óþýddu efni. Að auki getum við sleppt netbeiðnum á viðmóti þar sem við höfum þegar allar þýðingar sem við þurfum.

Við munum byrja á þ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 er, mun TacoTranslate sýna opinbera API lykilinn. Ef við erum í staðbundnu, prófunar- eða undirbúningsumhverfi (isProduction is false), munum við nota leynda read/write API lykilinn til að tryggja að nýjar strengir séu sendir til þýðingar.

Þangað til nú höfum við aðeins stillt Next.js forritið með lista yfir studd tungumál. Næsta skref verður að sækja þýðingar fyrir allar síður þínar. Til þess munðu nota annað hvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum þörfum.

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

Til að nota annað hvort fallið í síðu, skulum við ætla að þú hafir síðuskjal 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 texta 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! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við strengjum í Translate íhlutinn. Athugaðu að aðeins umhverfi með read/write heimildir á API lykilnum munu geta búið til nýja strengi til að þýða. Við mælum með að hafa lokað og öruggt staging-umhverfi þar sem þú getur prófað framleiðsluappið þ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 hugsanlega gera þýðingarverkefnið þitt þyngra með því að bæta við nýjum, óskyldum strengjum.

Gakktu úr skugga um að kíkja á 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, endilega hafðu samband, og við munum vera meira en fús til að aðstoða.

TacoTranslate gerir þér kleift að staðfæra React-forritin þín hratt yfir í og úr yfir 75 tungumálum sjálfkrafa. Byrjaðu í dag!