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

Wrth i'r byd ddod yn fwy byd-eang, mae'n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu apiau sy'n gallu ateb i anghenion defnyddwyr o wledydd a diwylliannau gwahanol. Un o'r ffyrdd allweddol o gyflawni hyn yw trwy ryngwladoli (i18n), sy'n eich galluogi i addasu eich ap i wahanol ieithoedd, arianau, a fformatau dyddiad.

Yn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli at eich cais React Next.js, gan ddefnyddio rendro ar ochr y gweinydd. TL;DR: Gweler yr enghraifft lawn yma.

Mae'r canllaw hwn ar gyfer aplikiadau Next.js sy'n defnyddio'r Pages Router.
Os ydych yn 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 llinynnau yn awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, gan eich rhyddhau rhag rheoli 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 i chi greu eich cyfrif TacoTranslate, prosiect cyfieithu, a allweddion API cysylltiedig. Crewch gyfrif yma. Mae'n rhad ac am ddim, ac nid oes angen i chi ychwanegu cerdyn credyd.

Yn rhyngwyneb defnyddiwr ap TacoTranslate, creu prosiect a llywiwch i'r tab allweddi API. Creu un allwedd read a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylchedd. Mae'r allwedd read yr hyn a elwir gennym yn public, a'r allwedd read/write yw secret. Er enghraifft, gallech eu hychwanegu at ffeil .env ar wreiddfa eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod locale diofyn a ddefnyddir fel wrth gefn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle caiff eich llinynnau eu storio, megis URL eich gwefan. Darllenwch ragor am tarddiadau yma.

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

Cam 3: Gosod TacoTranslate

Er mwyn integreiddio TacoTranslate gyda'ch cais, bydd angen i chi greu cleient gan ddefnyddio allweddi API o'r blaen. 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 ni'n diffinio TACOTRANSLATE_API_KEY yn awtomatig yn fuan.

Mae creu'r cleient mewn ffeil ar wahân yn ei gwneud yn haws i'w ddefnyddio eto yn ddiweddarach. Nawr, wrth ddefnyddio fersiwn wedi'i haddasu o /pages/_app.tsx, byddwn ni'n ychwanegu'r darparwr 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 chi eisoes pageProps a _app.tsx, estynwch y diffiniad gyda'r eiddo a'r cod uchod.

Step 4: Gweithredu rendro ar ochr y gweinydd

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

Byddwn yn 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 weddu i'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 ni'n defnyddio'r allwedd API gyfrinachol read/write er mwyn sicrhau bod llinynnau newydd yn cael eu hanfon i'w cyfieithu.

Hyd yn hyn, rydym wedi gosod yr ap Next.js gyda rhestr o ieithoedd a gefnogir yn unig. 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 gofynion.

Mae'r swyddogaethau hyn yn derbyn tri dadleuon: un gwrthrych Next.js Static Props Context, ffurfweddiad ar gyfer TacoTranslate, a phriodweddau Next.js dewisol. Sylwch bod 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 hyn 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 yn cael ei gyfieithu'n awtomatig yn awr pan fyddwch chi'n ychwanegu unrhyw llinynnau testun i gydran Translate. Sylwch mai dim ond amgylcheddau sydd â chaniatadau read/write ar yr allwedd API fydd yn gallu creu llinynnau testun newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staging caeedig a diogel lle gallwch brofi eich cais cynhyrchiant gyda allwedd API o'r fath, gan ychwanegu llinynnau testun newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl atal chwyddiant eich prosiect cyfieithu trwy ychwanegu llinynnau testun newydd, heb gysylltiad.

Gwnewch yn siŵr eich bod yn edrych ar yr enghraifft gyflawn ar ein proffil GitHub. Yno, fe welwch hefyd enghraifft o sut i wneud hyn gan ddefnyddio'r App Router! Os cewch chi unrhyw broblemau, mae croeso i chi gysylltu, a byddwn yn fwy na hapus i helpu.

Mae TacoTranslate yn eich galluogi i lleoleiddio eich apiau React yn awtomatig ac yn gyflym i ac o dros 75 o ieithoedd. Dechreuwch heddiw!