Sut i weithredu rhyngwladoli mewn cymhwysiad Next.js sydd yn defnyddio App Router

Wrth i’r byd ddod yn fwy rhyngwladoli, mae'n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu ceisiadau a all ddarparu ar gyfer defnyddwyr o wahanol wledydd a diwylliannau. Un o’r prif ffyrdd i gyflawni hyn yw trwy rhyngwladoli (i18n), sy’n caniatáu i chi addasu eich cais i ieithoedd, arian cyfredau, a fformatau dyddiad gwahanol.

Yn yr erthygl hon, byddwn yn archwilio sut i ychwanegu rhyngwladoli i’ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Gweler y gwaith cyflawn 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 weithredu rhyngwladoli yn eich cais Next.js, byddwn yn dewis llyfrgell i18n yn gyntaf. Mae sawl llyfrgell boblogaidd, gan gynnwys next-intl. Yn y darluniad hwn, fodd bynnag, byddwn yn defnyddio TacoTranslate.

Mae TacoTranslate yn cyfieithu eich llinynnau yn awtomatig i unrhyw iaith gan ddefnyddio AI ar y blaen, ac yn eich rhyddhau oddi wrth reolaeth diflas ffeiliau JSON.

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

npm install tacotranslate

Cam 2: Creu cyfrif TacoTranslate am ddim

Nawr eich bod wedi gosod y modiwl, mae'n bryd 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 UI ap TacoTranslate, creu prosiect, a llywio at ei dab allweddi API. Creu un allwedd read, ac un allwedd read/write. Byddwn yn eu cadw fel amgylcheddyddion. Yr allwedd read yw'r hyn yr ydym yn ei alw yn public, a'r allwedd read/write yw secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn y gwraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr na ddylech byth ryddhau'r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

Byddwn hefyd yn ychwanegu dau newidyn amgylchedd mwy: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod lleol awtomatig wrth fethu. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinellau testun 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: Gosod 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;

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 yn nes ymlaen. getLocales yn swyddogaeth cyfleustodau yn unig gyda rhywfaint o drin gwallau adeiledig. Nawr, creu ffeil o'r enw /app/[locale]/tacotranslate.tsx, lle byddwn yn gweithredu'r darparwr 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'; yn nodi 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 nodi yma yw ein bod yn defnyddio ein paramedr Dynamic Route [locale] i gael cyfieithiadau ar gyfer y iaith honno. Yn ogystal, mae generateStaticParams yn sicrhau bod pob cod lleoliad yr ydych wedi’i actifadu ar gyfer eich prosiect wedi’i rag-greu.

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 revalidate newidynnau sy'n dweud wrth Next.js i ailddweud y dudalen ar ôl 60 eiliad, a chadw eich cyfieithiadau'n gyfredol.

Cam 4: Gweithredu rendro ochr y gweinydd

Mae TacoTranslate yn cefnogi rendro ochr y gweinydd. Mae hyn yn gwella profiad y defnyddiwr yn aruthrol trwy ddangos cynnwys wedi'i gyfieithu ar unwaith, yn hytrach nag ymosodiad o gynnwys heb ei gyfieithu yn gyntaf. Yn ogystal, gallwn neidio dros gais rhwydwaith ar y cleient, oherwydd bod gennym eisoes y cyfieithiadau sydd eu hangen arnom ar gyfer y dudalen y mae'r defnyddiwr yn ei gwylio.

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

Addasu'r gwiriad isProduction i weddu i'ch gosodiad. Os true, bydd TacoTranslate yn wynebu'r allwedd API gyhoeddus. Os ydym mewn amgylchedd lleol, prawf neu lwyfannu (isProduction is false), byddwn yn defnyddio'r allwedd API read/write gyfrinachol i wneud yn siŵr bod llinynnau newydd yn cael eu hanfon i'w cyfieithu.

I sicrhau bod llwybro a ailgyfeirio yn gweithio fel y disgwylir, bydd angen i ni greu ffeil o'r enw /middleware.ts. Drwy ddefnyddio Middleware, gallwn ailgyfeirio defnyddwyr i dudalennau a gyflwynir yn eu hiaith ar ôl eu dewisiadau.

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 matcher yn unol â Dogfennaeth Middleware Next.js.

Ar y cleient, gallwch newid y cwci locale i newid iaith ddewisol y defnyddiwr. Edrychwch ar y cod enghreifftiol llawn am syniadau ar sut i wneud hyn!

Cam 5: Rhoi ar waith a phrofi!

Rydym wedi gorffen! Bydd eich cais React yn cael ei gyfieithu yn awtomatig nawr pan fyddwch yn ychwanegu unrhyw linellau at gydran Translate. Nodwch mai dim ond amgylcheddau sydd â chaniatâd read/write ar allwedd API a fydd yn gallu creu llinellau newydd i’w cyfieithu. Rydym yn argymell cael amgylchedd stagio caeedig a diogel lle gallwch brofi’ch cais cynhyrchu gyda allwedd API o’r fath, gan ychwanegu llinellau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl rhag llenwi’ch prosiect cyfieithu gyda llinellau newydd, anghysylltiedig.

Gwnewch yn siŵr i weld yr enghraifft gyflawn ar ein proffil GitHub. Yno, fe gewch hefyd enghraifft o sut i wneud hyn gan ddefnyddio'r Pages Router ! Os byddwch yn wynebu unrhyw broblemau, teimlwch yn rhydd i gysylltu
Mae TacoTranslate yn caniatáu i chi leoleiddio eich ceisiadau React yn awtomatig yn gyflym i ac o unrhyw iaith. Dechreuwch heddiw!