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

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

Yn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu ryngwladoli i’ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Gweler y enghraifft gyflawn 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 hytrach.

Cam 1: Gosod llyfrgell i18n

I weithredu rhyngwladoli yn eich cais Next.js, byddwn yn ddechrau 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 llinynnau'n awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, gan eich rhyddhau rhag y gwaith diflas o reoli ffeiliau JSON.

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

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, ac allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad ac am ddim, ac nid yw'n rhaid i chi ychwanegu cerdyn credyd.

Yn UI'r cymhwysiad TacoTranslate, creu prosiect a llywio at ei dab allweddau API. Creu un allwedd read, a un allwedd read/write. 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 y cyfeiriadur gwraidd 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 arall: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Cod lleol diofyn ar gyfer wrth gefn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle caiff eich cadwyni testun eu storio, megis URL eich gwefan. Darllenwch mwy am darddiadau 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'r allweddi API a gafwyd 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 cleient mewn ffeil ar wahân yn ei gwneud yn haws i'w ddefnyddio eto yn ddiweddarach. Nawr, wrth ddefnyddio /pages/_app.tsx wedi'i haddasu, 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 wedi'u haddasu, estynnwch y diffiniad gyda'r eiddo a'r cod uchod, os gwelwch yn dda.

Cam 4: Gweithredu rendro 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 trwy ddangos cynnwys wedi'i gyfieithu yn syth, 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 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'),
	});
};

Newidiwch y gwirio isProduction i weddu i'ch gosodiad. Os yw true, bydd TacoTranslate yn dangos y fysell API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu ar lwyfan (isProduction is false), byddwn yn defnyddio'r fysell API gyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon ar gyfer cyfieithu.

Hyd yn hyn, rydym wedi sefydlu'r cais 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, defnyddiwch naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn ôl eich anghenion.

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 gan ddiofyn, er mwyn i'ch cyfieithiadau aros yn gyfredol.

I ddefnyddio 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!"/>;
}

Nawr dylech allu defnyddio'r Translate cydran i gyfieithu llinynnau yn eich holl 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 bellach yn cael ei gyfieithu'n awtomatig pan fyddwch yn ychwanegu unrhyw destunau i gydran Translate. Sylwch y bydd dim ond amgylcheddau sydd â chaniatâd read/write ar yr allwedd API a fydd yn gallu creu testunau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staging caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o'r fath, gan ychwanegu testunau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun unrhywun rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl yn chwyddo'ch prosiect cyfieithu drwy ychwanegu testunau 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.

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