Sut i weithredu rhyngwladoli mewn cais Next.js sy’n defnyddio’r App Router

Wrth i’r byd ddod yn fwy rhyngwladol, mae’n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu cymwysiadau sy’n gallu diwallu defnyddwyr o wahanol wledydd a diwylliannau. Un o’r ffyrdd allweddol o gyflawni hyn yw trwy rhyngwladoli (i18n), sydd yn eich galluogi i addasu eich cais i wahanol ieithoedd, arian cyfred, a fformatau dyddiad.

Mewn erthygl hon, byddwn yn archwilio sut i ychwanegu rhyngwladoli i’ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Edrychwch ar yr enghraifft lawn yma.

Mae’r canllaw hwn ar gyfer ceisiadau Next.js sy’n defnyddio’r App Router.
Os ydych chi’n defnyddio’r Pages Router, gweler y canllaw hwn yn lle hynny.

Cam 1: Gosod llyfrgell i18n

I wireddu rhyngwladoli yn eich cais Next.js, dewiswn lyfrgell i18n yn gyntaf. Mae sawl llyfrgell boblogaidd, gan gynnwys next-intl. Yn yr enghraifft hon, fodd bynnag, byddwn yn defnyddio TacoTranslate.

Mae TacoTranslate yn cyfieithu eich llinynnau’n awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, ac yn rhyddhau chi rhag y gwaith diflas o reoli ffeiliau JSON.

Gadewch i ni osod ef gan ddefnyddio npm yn eich terminal:

npm install tacotranslate

Cam 2: Creu cyfrif TacoTranslate am ddim

Nawr eich bod wedi gosod y modwl, mae’n amser creu eich cyfrif TacoTranslate, prosiect cyfieithu, a allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad ac am ddim, ac nid oes angen i chi ychwanegu cerdyn credyd.

O fewn rhyngwyneb defnyddiwr TacoTranslate, creu prosiect, a lywio at ei dab allweddi API. Creu un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel amrywiolion amgylchedd. Gelwir yr allwedd read yn public, a’r allwedd read/write yn secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn wreiddyn eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr na fyddwch byth yn datgelu’r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

Byddwn hefyd yn ychwanegu dau newidyn amgylcheddol arall: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod lleol wrth gefn diofyn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinynnau yn cael eu storio, megis URL eich gwefan. Darllenwch fwy am darddiadau yma.

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

Cam 3: Sefydlu TacoTranslate

I integreiddio TacoTranslate gyda’ch cais, bydd angen i chi greu cleient gan ddefnyddio’r allweddi API o’r blaen. Er enghraifft, crëwch ffeil o’r enw /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;

Byddwn yn diffinio TACOTRANSLATE_API_KEY a TACOTRANSLATE_PROJECT_LOCALE yn awtomatig cyn bo hir.

Mae creu’r cleient mewn ffeil ar wahân yn ei gwneud hi’n hawdd ei ddefnyddio eto nes ymlaen. Mae getLocales yn swyddogaeth ddefnyddiol sy’n cynnwys rhywfaint o driniaeth camgymeriadau adeiledig. Nawr, creu ffeil o’r enw /app/[locale]/tacotranslate.tsx, lle byddwn yn gweithredu’r ddarparwr TacoTranslate.

'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>
	);
}

Sylwch ar 'use client'; sy’n dangos bod hwn yn gydran cleient.

Gyda'r darparwr cyd-destun bellach yn barod i fynd, creu ffeil o'r enw /app/[locale]/layout.tsx, y cynllun gwraidd yn ein cais. Sylwch fod gan y llwybr hwn ffolder sy'n defnyddio Dynamic Routes, lle [locale] yw'r paramedr deinamig.

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>
	);
}

Y peth cyntaf i’w nodi yma yw ein bod yn defnyddio ein paramedr Dynamic Route [locale] i nôl cyfieithiadau ar gyfer y iaith honno. Yn ogystal, mae generateStaticParams yn sicrhau bod pob cod lleoliad rydych wedi’i actifadu ar gyfer eich prosiect wedi’i rag-ffurfredu.

Nawr, gadewch i ni adeiladu ein tudalen gyntaf! Creu ffeil o’r enw /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!" />
	);
}

Nodwch y newidyn revalidate sy’n dweud wrth Next.js ailadeiladu’r dudalen ar ôl 60 eiliad, a chadw eich cyfieithiadau yn gyfredol.

Cam 4: Gweithredu rendro ochr-y-gweinydd

Mae TacoTranslate yn cefnogi rendro ochr y gweinydd. Mae hyn yn gwella profiad y defnyddiwr yn sylweddol drwy ddangos cynnwys wedi’i gyfieithu ar unwaith, yn hytrach na fflach o gynnwys heb ei gyfieithu yn gyntaf. Yn ychwanegol, gallwn neidio dros geisiadau rhwydwaith ar y cleient, oherwydd mae gennym eisoes y cyfieithiadau rydym eu hangen ar gyfer y dudalen y mae’r defnyddiwr yn ei gwylio.

I osod rendro ochr y gweinydd, creu neu ddiwygio /next.config.js:

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};
};

Addaswch y gwirio isProduction i fodloni eich gosodiad. Os yw true, bydd TacoTranslate yn dangos y allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu gamu ymlaen (isProduction is false), byddwn yn defnyddio’r allwedd API cyfrinachol read/write i sicrhau bod cadwyni newydd yn cael eu hanfon ar gyfer cyfieithu.

I sicrhau bod llwybro a aildirnodi yn gweithio fel y disgwylir, bydd angen i ni greu ffeil o’r enw /middleware.ts. Gan ddefnyddio Middleware, gallwn ailddirnodi defnyddwyr i dudalennau sy’n cael eu dangos yn eu hiaith ddewisol.

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);
}

Gwnewch yn siŵr eich bod yn sefydlu’r matcher yn unol â ddogfennaeth Middleware Next.js.

Ar y cleient, gallwch newid y cwci locale i newid pa iaith yw iaith ffefryn y defnyddiwr. Gweler cod enghreifftiol cyflawn am syniadau ar sut i wneud hyn!

Cam 5: Cyhoeddi a phrofi!

Rydyn ni wedi gorffen! Bydd eich cais React yn cael ei gyfieithu yn awtomatig yn awr pan fyddwch yn ychwanegu unrhyw linellau at gydran Translate. Sylwch mai dim ond amgylcheddau gyda chaniatâd read/write ar y allwedd API fydd yn gallu creu llinellau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staged caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o’r fath, gan ychwanegu llinellau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl llenwi eich prosiect cyfieithu gyda llinellau newydd, di-gysylltiad.

Gwnewch yn siŵr eich bod yn edrych ar y enghraifft lawn drosodd ar ein proffil GitHub. Yno, fe welwch hefyd enghraifft o sut i wneud hyn gan ddefnyddio’r Pages Router! Os byddwch yn wynebu unrhyw broblemau, mae croeso i chi gysylltu, a byddwn yn fwy na pharod i helpu.

Mae TacoTranslate yn eich galluogi i leoleiddio eich ceisiadau React yn awtomatig ac yn gyflym i ac o unrhyw iaith. Dechreuwch heddiw!