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 apiau sy'n gallu diwallu defnyddwyr o wledydd a diwylliannau gwahanol. Un o'r ffyrdd allweddol i gyflawni hyn yw rhyngwladoli (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 i'ch cais React Next.js, gyda rendro ar 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 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 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 drwy 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 TacoTranslate, creiwch 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 a elwir gennym yn public, a'r allwedd read/write yw secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn y gwreiddfa o'ch 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 amrywiolyn amgylcheddol arall: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod lleoliad diofyn sy’n cael ei ddefnyddio fel ateb os nad oes cyfieithiad. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle caiff eich llinynnau testun eu storio, er enghraifft URL eich gwefan. Darllenwch ragor am darddiadau yma.

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

Cam 3: Sefydlu TacoTranslate

Er mwyn integreiddio TacoTranslate â’ch aplikiad, bydd angen i chi greu cleient gan ddefnyddio'r allweddi API a roddwyd yn gynharach. 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 ddiweddarach. Nawr, gan 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 eisoes pageProps a _app.tsx wedi'u haddasu, estynwch y diffiniad gyda'r eiddo a'r côd 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 fflas 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 trwy greu neu olygu /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 gosodiad. Os yw true, bydd TacoTranslate yn dangos yr allwedd API gyhoeddus. Os ydym mewn amgylchedd lleol, prawf neu amgylchedd paratoi (isProduction is false), byddwn ni'n defnyddio'r allwedd API gyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon ar gyfer cyfieithu.

Hyd yn hyn, rydym 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 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 y bydd eich cyfieithiadau'n aros yn gyfredol.

I ddefnyddio unrhyw un o'r swyddogaethau ar dudalen, tybiwch 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 cydran Translate i gyfieithu linynnau o fewn eich holl gydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Rhyddhau a phrofi!

Dyna ni! Bydd eich cais React yn cael ei gyfieithu'n awtomatig yn awr pan ychwanegwch unrhyw llinynnau 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 prawf caeedig a diogel lle y gallwch brofi eich cais cynhyrchiol gyda allwedd API o'r fath, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun unrhywun rhag dwyn eich allwedd API gyfrinachol, ac, o bosibl, rhag chwyddoli eich prosiect cyfieithu drwy ychwanegu llinynnau newydd nad ydynt yn gysylltiedig.

Gwnewch yn siŵr i edrych ar yr enghraifft gyflawn ar ein proffil GitHub. Yno, byddwch hefyd yn dod o hyd i enghraifft o sut i wneud hyn gan ddefnyddio'r App Router! Os ydych chi'n wynebu unrhyw broblemau, peidiwch ag oedi i gysylltu, a byddwn ni'n fwy na hapus i helpu.

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