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

Þar sem heimurinn verður sífellt hnattvæddari er það æ mikilvægara fyrir vefþróunaraðila að búa til forrit sem geta þjónustað notendur frá mismunandi löndum og menningarheimum. Einn lykilatriðin 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 dagsetningasniðmátum.

Í þessari grein munum við kanna hvernig á að bæta alþjóðavæðingu við React Next.js forritið þitt, með þjónustuhliðarröðun. TL;DR: Sjáðu heildardæmið hér.

Þessi handbók er fyrir Next.js forrit sem nota App Router.
Ef þú ert að nota Pages Router, skoðaðu þá þessa handbók í staðinn.

Skref 1: Settu upp i18n bókasafn

Til að innleiða alþjóðavæðingu í Next.js forritið þitt skulum við fyrst velja i18n bókasafn. Það eru nokkur vinsæl bókasöfn, þar á meðal next-intl. Í þessu dæmi munum við þó nota TacoTranslate.

TacoTranslate þýðir sjálfkrafa strengina þína yfir á hvaða tungumál sem er með nýjustu gervigreindartækni 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 aðgang

Nú þegar þú hefur sett upp mótullinn, er kominn tími til að búa til TacoTranslate-reikninginn þinn, þýðingarverkefni og tengd API lyklana. Búðu til reikning hér. Það er ókeypis, og krefst ekki þess að þú setjir inn kreditkort.

Innan TacoTranslate forritunarviðmótsins, búðu til verkefni og farðu í flipa sem heitir API lyklar. 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 leyninum read/write API lykli til framenda í framleiðsluumhverfi.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sjálfgefið varakóði fyrir tungumálasvæði. Í þessu dæmi stillum við það á en fyrir ensku.
• TACOTRANSLATE_ORIGIN: „Mappa“ þar sem textastrengir þínir verða geymdir, eins og slóð vefsíðunnar þinnar. Lestu meira um uppruna hér.

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

Skref 3: Uppsetning 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Við munum fljótlega sjálfkrafa skilgreina TACOTRANSLATE_API_KEY og TACOTRANSLATE_PROJECT_LOCALE.

Að búa til biðlarann í sérstakri skrá gerir það auðvelt að nota það aftur síðar. getLocales er bara gagnsemisaðgerð með innbyggðri villumeðhöndlun. Búðu nú til skrá sem heitir /app/[locale]/tacotranslate.tsx, þar sem við innleiðum TacoTranslate veituna.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Athugaðu 'use client'; sem bendir til þess að þetta sé viðskiptavinshluti.

Með því að samhengi veitan er nú tilbúin, búa til skrá sem heitir /app/[locale]/layout.tsx, aðaluppsetningin í okkar umsókn. Athugið að þessi leið hefur möppu sem nýtir Dynamic Routes, þar sem [locale] er breytilegi parámetros.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Það fyrsta sem vert er að taka eftir hér er að við notum Dynamic Route breytuna okkar [locale] til að sækja þýðingar fyrir það tungumál. Auk þess sér generateStaticParams til þess að allir tungumálakóðar sem þú hefur virkjað fyrir verkefnið þitt eru for-renderaðir.

Nú skulum við byggja okkar fyrstu síðu! Búðu til skrá sem heitir /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Athugaðu revalidate breytuna sem segir Next.js að endurbyggja síðuna eftir 60 sekúndur og halda þýðingunum þínum uppfærðum.

Skref 4: Innleiðing á þjónustuhliðarröðun

TacoTranslate styður við framvindu þjónushliðar. Þetta bætir notendaupplifunina verulega með því að sýna þýddan texta strax, í stað þess að birta óþýddan texta fyrst. Að auki getum við sleppt netbeiðnum í viðskiptavin, þar sem við höfum þegar þýðingarnar sem við þurfum fyrir síðuna sem notandinn er að skoða.

Til að setja upp server side rendering, búðu til eða breyttu /next.config.js skrá:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

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.

Til að tryggja að leiðakerfi og endurvarp virki eins og búist er við, þurfum við að búa til skrá sem heitir /middleware.ts. Með því að nota Middleware, getum við vísað notendum á síður sem sýndar eru á þeirra valda tungumáli.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Gakktu úr skugga um að stilla matcher í samræmi við gögn Next.js Middleware.

Á viðskiptavinahliðinni geturðu breytt locale smákökunni til að breyta þeirri tungumálakunni sem notandinn kýs. Vinsamlegast skoðaðu heildardæmið með kóðanum til að fá hugmyndir um hvernig þetta er gert!

Skref 5: Settu af stað og prófaðu!

Við erum búin! React-forritið þitt verður nú þýtt sjálfkrafa þegar þú bætir við hvaða strengjum sem er í Translate íhlut. Athugaðu að aðeins umhverfi með read/write heimildir á API lykli 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ð API lykli af þessu tagi, bætt við nýjum strengjum áður en farið er „live“. Þetta kemur í veg fyrir að einhver steli leynilegum API lykli þínum og mögulega auki stærð þýðingarverkefnisins með því að bæta við nýjum, ótengdum strengjum.

Gakktu úr skugga um að kanna heildardæmið á GitHub prófílnum okkar. Þar finnur þú einnig dæmi um hvernig á að gera þetta með Pages Router! Ef þú lendir í einhverjum vandræðum, ekki hika við að hafa samband, og við munum vera meira en fús til að hjálpa.

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