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

Þegar heimurinn verður sífellt hnattvæddari, verður það æ mikilvægara fyrir vefhönnuði að byggja upp forrit sem geta þjónað notendum 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 á að bæta alþjóðavæðingu við React Next.js forritið þitt, með þjónanálægðarrenderun (server side rendering). TL;DR: Skoðað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, vinsamlegast sjáðu þessa leiðbeiningu í 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, í þessu dæmi munum við nota TacoTranslate.

TacoTranslate þýðir sjálfkrafa textana þína yfir á öll tungumál með háþróaðri 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: Stofnaðu ó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. Stofnaðu reikning hér. Það er ókeypis, og krefst ekki þess að þú leggir inn kreditkort.

Í notendaviðmóti TacoTranslate forritsins, búðu til verkefni, og farðu á flipann fyrir API-lykla. 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.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gakktu úr skugga um að leka aldrei hinum leynilega API-lykli read/write í framleiðsluumhverfi á viðskiptavinahlið.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið varasvæðiskóði (locale). Í þessu dæmi stillum við hann á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: “mappa” þar sem strengirnir þínir verða geymdir, til dæmis slóð vefsíðunnar þinnar. Lesa 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 þarftu að búa til client með API-lyklunum sem þú bjóst til áðan. 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érstöku skjali gerir það auðveldara að nota hann aftur síðar. Nú, með sérsniðnu /pages/_app.tsx, munum við bæta TacoTranslate provider-inum við.

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ðna pageProps og _app.tsx, vinsamlegast framlengdu skilgreininguna með eiginleikum og kóðanum hér að ofan.

Skref 4: Innleiðing á þjónustuþjónustu rendering

TacoTranslate gerir kleift að birta þýðingar á þjóninum. Þetta bætir notendaupplifunina verulega því þýtt efni er sýnt strax, í stað þess að birta fyrst stutta glampa af óþýddu efni. Auk þess getum við sleppt netbeiðnum í vafranum, þar sem okkur eru þegar til 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 skilyrðinu þannig það henti þinni uppsetningu. Ef true er, mun TacoTranslate birta opinbera API lykilinn. Ef við erum í staðbundnu, prófunar- eða undirbúningsumhverfi (isProduction is false) munum við nota leynilega read/write API lykilinn til að tryggja að nýjar strengir séu sendir til þýðingar.

Frá upphafi höfum við aðeins sett upp Next.js-forritið með lista yfir studd tungumál. Næsta skref er að sækja þýðingar fyrir allar síður þínar. Til þess notar þú annaðhvort getTacoTranslateStaticProps eða getTacoTranslateServerSideProps eftir þörfum.

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

Til að nota annaðhvort af þessum föllum í síðu, skulum við gera ráð fyrir að þú hafir skrá fyrir síðu 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 strengi í öllum React-íhlutum þínum.

import {Translate} from 'tacotranslate/react';

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

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

Við erum búnir! React-forritið þitt verður nú sjálfkrafa þýtt þegar þú bætir við strengjum í Translate íhlut. Athugaðu að aðeins umhverfi með read/write réttindum á API-lykli mun geta búið til nýja strengi til þýðingar. Við mælum með að þú hafir lokað og öruggt prófunarumhverfi (staging environment) þar sem þú getur prófað framleiðsluforritið þitt með slíkan API-lykil og bætt við nýjum strengjum áður en þú ferð í framleiðslu. Þetta mun koma í veg fyrir að einhver steli leynilykli þínum og hugsanlega fylla þýðingarverkefnið þitt af nýjum, ótengdum strengjum.

Vertu viss 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 þú rekst á einhver vandamál, ekki hika við að hafa samband, við hjálpum þér gjarnan.

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