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

Því meira sem heimurinn verður hnattrænn, því mikilvægara er fyrir vefþróunaraðila að búa til forrit sem geta þjónustað notendur frá mismunandi löndum og menningarheimum. Einn af lykilleiðunum til að ná þessu fram er með 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 bæta megi alþjóðavæðingu við React Next.js forritið þitt, með þjónustu á miðlara hliðinni. TL;DR: Sjáðu fullt dæmi hér.

Þessi leiðarvísir er fyrir Next.js forrit sem nota Pages Router.
Ef þú ert að nota 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 munum við í þessu dæmi nota TacoTranslate.

TacoTranslate þýðir strengina þína sjálfvirkt á hvaða tungumál sem er með nýjustu gervigreindartækni og frelsar þig frá þreytandi meðhöndlun JSON skrár.

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

npm install tacotranslate

Skref 2: Búðu til frítt 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 krefst ekki að þú setjir inn kreditkort.

Innan viðmóts TacoTranslate forritsins, búðu til verkefni og farðu í API lyklasvæði þess. Búðu til einn read lykil og einn read/write lykil. Við munum vista þá sem umhverfisbreytur. read lykillinn kallast public en read/write lykillinn er secret. Til dæmis gætirðu bætt þeim inn í .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 framhliðarloka í framleiðsluumhverfum.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið fallback svæðiskóði. Í þessu dæmi setjum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem textastrengir þínir verða geymdir, eins og slóð vefsíðunnar þinnar. Lestu meira um origins 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 sem þú bjóst til 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 innan skamms.

Að búa til client í sér skrá gerir það auðveldara að nota aftur seinna. Nú, með því að nota sérsniðið /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ðnar pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikunum og kóðanum hér að ofan.

Skref 4: Innleiðing á þjónustuhliðarræstri (server side rendering)

TacoTranslate gerir kleift að birta þýðingar á þjónustuhliðinni. Þetta bætir notendaupplifunina verulega með því að sýna þýtt efni strax, í stað þess að birta óþýtt efni í smá stund fyrst. Að auki getum við sleppt netbeiðnum á viðskiptavinshliðinni, þar sem við höfum þegar öll þýðingarnar 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 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.

Frá upphafi 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 munt þú nota annaðhvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þínum þörfum.

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

Til að nota hvorugri aðgerðina í 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ð geta notað Translate íhlutann til að þýða texta innan allra React íhluta þ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/n! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við strengjum í Translate eininguna. Athugaðu að aðeins umhverfi með read/write heimildir á API lykli geta búið til nýja þýðingastrauma. Við mælum með að hafa lokað og öruggt prófunarumhverfi þar sem þú getur prófað framleiðsluforritið þitt með slíkan API lykil og bætt við nýjum strengjum áður en þú fer í beinu útsendingu. Þetta kemur í veg fyrir að einhver steli leynilega API lykli þínum og mögulega fylli þýðingarverkefnið þitt með nýjum, óskyldum strengjum.

Gakktu úr skugga um að skoða 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, ekki hika við að hafa samband, við hjálpum þér fúslega.

TacoTranslate gerir þér kleift að sjálfvirkt staðfæra React forritin þín fljótt til og frá hvaða tungumáli sem er. Byrjaðu í dag!