Sut i weithredu rhyngwladoli mewn cais Next.js sy'n defnyddio'r Pages Router

Wrth i'r byd ddod yn fwy byd-eang, mae'n gynyddol bwysig i ddatblygwyr gwe adeiladu cymwysiadau sy'n gallu diwallu defnyddwyr o wahanol wledydd a diwylliannau. Un o'r ffyrdd allweddol i gyflawni hyn yw trwy rhyngwladoli (i18n), sy'n eich galluogi i addasu eich cais i wahanol ieithoedd, arianau, a fformatau dyddiad.

Yn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i'ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Gweler yr enghraifft lawn yma.

Mae'r canllaw hwn ar gyfer cymwysiadau Next.js sy'n defnyddio Pages Router.
Os ydych yn defnyddio'r App Router, defnyddiwch y canllaw hwn yn hytrach.

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. Fodd bynnag, yn yr enghraifft hon, byddwn yn defnyddio TacoTranslate.

TacoTranslate yn cyfieithu eich llinynnau'n awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, ac yn eich rhyddhau rhag y gwaith diflas o reoli 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 amser i greu eich cyfrif TacoTranslate, prosiect cyfieithu, a'r allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad ac am ddim, ac nid oes angen i chi ychwanegu cerdyn credyd.

O fewn rhyngwyneb y cais TacoTranslate, crewch brosiect, a llywiwch i'r tab allweddi API. Crewch un read allwedd, a un read/write allwedd. Byddwn yn eu cadw fel newidynnau amgylcheddol. Y allwedd read yw'r hyn a elwir gennym yn public, a'r allwedd read/write yw'r secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn nghyfeiriadur gwraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Peidiwch byth â datgelu'r allwedd API gyfrinachol read/write mewn amgylcheddau cynhyrchu ar ochr y cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod lleoliad diofyn a ddefnyddir fel ateb pan fethir. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich testunau 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

Er mwyn integreiddio TacoTranslate â'ch cais, bydd angen i chi greu cleient gan ddefnyddio'r allweddi API a ddarparwyd yn gynharach. Er enghraifft, creu 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Byddwn yn diffinio TACOTRANSLATE_API_KEY yn awtomatig yn fuan.

Mae creu'r client mewn ffeil ar wahân yn ei gwneud yn haws ei ddefnyddio eto yn nes ymlaen. Nawr, gan ddefnyddio /pages/_app.tsx wedi'i haddasu, byddwn yn ychwanegu'r ddarparwr TacoTranslate.

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

Os oes gennych eisoes pageProps a _app.tsx wedi'u haddasu, estynnwch y diffiniad gyda'r eiddo a'r cod uchod.

Cam 4: Gweithredu rendro ar ochr y gweinydd

Mae TacoTranslate yn caniatáu rendro ar ochr y gweinydd o'ch cyfieithiadau. Mae hyn yn gwella profiad y defnyddiwr yn fawr drwy ddangos cynnwys wedi'i gyfieithu yn syth, yn hytrach na fflas o gynnwys heb ei gyfieithu ar y dechrau. Yn ogystal, gallwn hepgor ceisiadau rhwydwaith ar y cleient, oherwydd ein bod eisoes yn meddu ar yr holl gyfieithiadau sydd eu hangen arnom.

Byddwn ni'n dechrau drwy greu neu addasu /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'),
	});
};

Addaswch y gwiriad isProduction i gyd-fynd â'ch cyfluniad. Os yw true, bydd TacoTranslate yn dangos yr allwedd API gyhoeddus. Os ydym mewn amgylchedd lleol, prawf neu staging (isProduction is false), byddwn yn defnyddio'r allwedd API gyfrinachol read/write i sicrhau bod stringiau newydd yn cael eu hanfon i'w cyfieithu.

Hyd yn hyn, rydyn ni ond wedi sefydlu'r cais Next.js gyda rhestr o ieithoedd a gefnogir. Y peth nesaf a wnawn yw nôl cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, byddwch yn defnyddio naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn dibynnu ar eich anghenion.

Mae'r swyddogaethau hyn yn derbyn tri dadleuon: un gwrthrych Next.js Static Props Context, cyfluniad ar gyfer TacoTranslate, a phriodweddau Next.js dewisol. Sylwch fod revalidate ar getTacoTranslateStaticProps wedi'i osod i 60 yn ddiofyn, er mwyn i’ch cyfieithiadau aros yn gyfredol.

I ddefnyddio un neu'r llall o'r swyddogaethau mewn tudalen, gadewch i ni dybio bod gennych ffeil tudalen fel /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!"/>;
}

Dylech nawr allu defnyddio'r cydran Translate i gyfieithu llinynnau ym mhob un o'ch cydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Rhoi ar waith a phrofi!

Dyna ni! Bydd eich cais React bellach yn cael ei gyfieithu'n awtomatig pan fyddwch yn ychwanegu unrhyw linynnau i gydran Translate. Sylwch mai dim ond amgylcheddau sydd â chaniatâd read/write ar yr allwedd API fydd yn gallu creu llinynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd profi caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o'r fath, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un unrhyw un rhag dwyn eich allwedd API gyfrinachol, a gall hyn hefyd arwain at dyfiant gormodol yn eich prosiect cyfieithu drwy ychwanegu llinynnau newydd nad ydynt yn berthnasol.

Gwnewch yn siŵr i weld yr enghraifft gyflawn ar ein proffil GitHub. Yno, fe welwch hefyd enghraifft o sut i wneud hyn gan ddefnyddio App Router! Os byddwch yn cael unrhyw broblemau, teimlwch yn rhydd i gysylltu, a byddwn yn fwy na pharod i helpu.

Mae TacoTranslate yn caniatáu ichi leoleiddio eich cymwysiadau React yn awtomatig, yn gyflym, i ac o dros 75 o ieithoedd. Dechreuwch heddiw!