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 dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu cymwysiadau a all ddiwallu anghenion defnyddwyr o wledydd a diwylliannau gwahanol. Un o'r prif ffyrdd i gyflawni hyn yw trwy rhyngwladoliad (i18n), sy'n eich galluogi i addasu eich cymhwysiad i wahanol ieithoedd, arianfeydd a fformatau dyddiad.

Yn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoliad i'ch cymhwysiad React Next.js, gan ddefnyddio rendro ar ochr y gweinydd. TL;DR: Gweler yr enghraifft lawn yma.

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

Cam 1: Gosod llyfrgell i18n

Er mwyn gweithredu 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.

Mae TacoTranslate yn cyfieithu eich testunau'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 derfynell:

npm install tacotranslate

Cam 2: Creu cyfrif TacoTranslate am ddim

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

Yn rhyngwyneb y cais TacoTranslate, crëwch brosiect a llywiwch i'r tab allweddi API. Creu un allwedd read a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylcheddol. Y allwedd read yw'r hyn yr ydym yn ei alw'n public a'r allwedd read/write yw'r secret. Er enghraifft, gallech ychwanegu'r rhain at ffeil .env yn ffolder gwraidd 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 ar ochr y cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod lleol diofyn wrth gefn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinynnau'n cael eu storio, megis URL eich gwefan. Darllenwch ragor 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 a roddwyd 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 cyn bo hir.

Mae creu'r cleient mewn ffeil ar wahân yn ei gwneud yn haws i'w ddefnyddio eto yn nes ymlaen. Nawr, gan ddefnyddio /pages/_app.tsx wedi'i haddasu, byddwn ni'n 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, ymestynnwch y diffiniad gyda'r priodoleddau a'r cod uchod, os gwelwch yn dda.

Cam 4: Gweithredu rendro ar ochr y gweinydd

Mae TacoTranslate yn caniatáu rendro ar ochr y gweinydd ar gyfer eich cyfieithiadau. Mae hyn yn gwella profiad y defnyddiwr yn fawr drwy ddangos cynnwys wedi'i gyfieithu ar unwaith, yn hytrach na fflach o gynnwys heb ei gyfieithu gyntaf. Yn ogystal, gallwn osgoi ceisiadau rhwydwaith ar y cleient, gan ein bod eisoes wedi cael yr holl gyfieithiadau sydd eu hangen arnom.

Byddwn yn dechrau trwy 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 gwirio isProduction i gyd-fynd â'ch gosodiad. Os true, bydd TacoTranslate yn dangos yr allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, profi neu staging (isProduction is false), byddwn yn defnyddio'r allwedd API gyfrinachol read/write i sicrhau bod striniau newydd yn cael eu hanfon i'w cyfieithu.

Hyd yn hyn, rydym ond wedi gosod y cais Next.js gyda rhestr o ieithoedd a gefnogir. Yr hyn nesaf a wnawn yw nôl cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, defnyddiwch naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn ôl eich gofynion.

Mae'r swyddogaethau hyn yn cymryd 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, fel bod eich cyfieithiadau yn aros yn gyfredol.

Er mwyn defnyddio unrhyw un o'r swyddogaethau ar dudalen, tybiwn fod 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 gydran Translate i gyfieithu llinynnau ym mhob un o’ch gydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Rhoi ar waith a phrofi!

Rydym wedi gorffen! Bydd eich cais React yn cael ei gyfieithu'n awtomatig wrth i chi ychwanegu unrhyw llinynnau i gydran Translate. Sylwch mai dim ond amgylcheddau sydd â chaniatâd read/write ar y allwedd API fydd yn gallu creu llinynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staging caeedig a diogel lle gallwch brofi eich cais cynhyrchiol gyda allwedd API o'r fath, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac yn helpu i atal eich prosiect cyfieithu rhag llenwi â llinynnau newydd nad ydynt yn berthnasol.

Gwnewch yn siŵr eich bod yn edrych ar yr enghraifft cyflawn ar ein proffil GitHub. Yno, byddwch hefyd yn dod o hyd i enghraifft o sut i wneud hyn gan ddefnyddio App Router! Os byddwch yn wynebu unrhyw broblemau, teimlwch yn rhydd i gysylltu, a byddwn yn fwy na hapus i helpu.

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