Sut i weithredu rhyngwladoli mewn cymhwysiad Next.js sy'n defnyddio 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'r Pages Router.
Os ydych chi'n defnyddio'r App Router, gweler y canllaw hwn yn lle.

Cam 1: Gosod llyfrgell i18n

I weithredu rhyngwladoli yn eich cais Next.js, byddwn yn dechrau drwy ddewis llyfrgell i18n. Mae sawl llyfrgell boblogaidd, gan gynnwys next-intl. Fodd bynnag, yn yr enghraifft hon, byddwn yn defnyddio TacoTranslate.

Mae TacoTranslate yn cyfieithu eich testunau yn awtomatig i unrhyw iaith gan ddefnyddio AI blaengar, ac yn eich rhyddhau rhag y gwaith diflas o reoli ffeiliau JSON.

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

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.

Yn rhyngwyneb defnyddiwr (UI) TacoTranslate, creuwch brosiect a symudwch i'r tab allweddi API. Creuwch un read allwedd a un read/write allwedd. Byddwn yn eu cadw fel newidynnau amgylchedd. Yn ein hachos ni, mae'r allwedd read yn yr hyn a elwir yn public, a'r allwedd read/write yn yr hyn a elwir yn secret. Er enghraifft, gallech eu hychwanegu at ffeil .env ym mraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr na wnewch byth ddatgelu'r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ar ochr y cleient.

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

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

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

Cam 3: Sefydlu TacoTranslate

Er mwyn integreiddio TacoTranslate gyda’ch cais, bydd angen i chi greu cleient gan ddefnyddio'r allweddi API o'r uchod. Er enghraifft, creuwch 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 cleient mewn ffeil ar wahân yn ei gwneud yn haws ei ddefnyddio eto yn nes ymlaen. Nawr, trwy ddefnyddio /pages/_app.tsx, 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 fersiynau wedi'u haddasu o pageProps a _app.tsx, estynnwch y diffiniad gyda'r priodoleddau a'r cod uchod, os gwelwch yn dda.

Cam 4: Gweithredu rendro ar ochr y gweinydd

Mae TacoTranslate yn cefnogi 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 yn gyntaf. Yn ogystal, gallwn osgoi ceisiadau rhwydwaith ar y cleient, oherwydd bod gennym eisoes 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 gwiriad isProduction i gyd-fynd â'ch gosodiad. 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 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, cyfluniad ar gyfer TacoTranslate, a phriodweddau dewisol Next.js. Sylwch fod revalidate ar getTacoTranslateStaticProps wedi'i osod i 60 yn ddiofyn, fel bod eich cyfieithiadau'n aros yn gyfredol.

I ddefnyddio unrhyw un o'r swyddogaethau ar dudalen, 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 erbyn hyn pan fyddwch yn ychwanegu unrhyw linynnau i gydran Translate. Sylwch nad ond amgylcheddau sydd â chaniatâd read/write ar y allwedd API fydd yn gallu creu linynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd rhagbrofol caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o'r fath, gan ychwanegu linynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun unrhywun rhag dwyn eich allwedd API gyfrinachol, ac, o bosibl, achosi i'ch prosiect cyfieithu dyfu'n ormodol trwy ychwanegu linynnau newydd nad ydynt yn gysylltiedig.

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

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