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

Wrth i'r byd ddod yn fwy rhyngwladoli, mae'n dod yn fwy ac yn bwysicach i ddatblygwyr gwe adeiladu cymwysiadau sy'n gallu diwallu defnyddwyr o wledydd a diwylliannau gwahanol. Un o'r ffyrdd allweddol o gyflawni hyn yw trwy rhyngwladoli (i18n), sy'n caniatáu i chi addasu eich cais i wahanol ieithoedd, arian ynni, a fformatau dyddiad.

Mewn ymarfer hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i'ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Edrychwch ar yr enghraifft lawn yma.

Mae’r canllaw hwn ar gyfer ceisiadau Next.js sy’n defnyddio’r Pages Router.
Os ydych yn defnyddio’r App Router, gwelwch y canllaw hwn yn lle hynny.

Cam 1: Gosod llyfrgell i18n

I weithredu 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, ac yn 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 amser creu eich cyfrif TacoTranslate, prosiect cyfieithu, a allweddau API cysylltiedig. Creu cyfrif yma. Mae’n rhad ac am ddim, a nid oes angen i chi ychwanegu cerdyn credyd.

Yn nhwylo UI ap TacoTranslate, creu prosiect, a llywio i’r tab allweddi API. Creu un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel amgylcheddau newidynnau. Y allwedd read yw’r hyn a alwn yn public a’r allwedd read/write yw’r secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn wraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr nad ydych byth yn datgeluʼr allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod iaith ddychwynnol diofyn. Yn y canlynol, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinynnau’n cael eu storio, fel URL eich gwefan. Darllenwch fwy am darddiadau yma.

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

Cam 3: Gosod TacoTranslate

I integreiddio TacoTranslate gyda’ch cais, bydd angen i chi greu cleient gan ddefnyddio allweddi API o’r blaen. Er enghraifft, crëwch 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.

Creu’r cleient mewn ffeil ar wahân yn ei gwneud hi’n haws ei ddefnyddio eto yn nes ymlaen. Nawr, gan ddefnyddio /pages/_app.tsx wedi’i deilwra, 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 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 ar gyfer rendro ar ochr y gweinydd o’ch 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 ychwanegol, gallwn hepgor 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'),
	});
};

Newidiwch y gwirio isProduction i fodloni'ch gosodiad. Os yw true, bydd TacoTranslate yn dangos y allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu lwyfan efelychu (isProduction is false), byddwn yn defnyddio'r allwedd API cyfrinachol 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, byddwch yn defnyddio naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn seiliedig ar eich gofynion.

Mae’r swyddogaethau hyn yn cymryd tri dadleuon: Un gwrthrych Next.js Static Props Context, cyfluniad ar gyfer TacoTranslate, a rhinweddau dewisol Next.js. Nodwch fod revalidate ar getTacoTranslateStaticProps wedi’i osod i 60 fel diofyn, fel bod eich cyfieithiadau yn aros yn gyfredol.

I ddefnyddio unrhyw un o'r swyddogaethau hyn mewn tudalen, dywedwn 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 llinynnau o fewn pob un o'ch cydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Trosi a phrofi!

Rydyn ni wedi gorffen! Bydd eich cais React yn cael ei gyfieithu’n awtomatig erbyn hyn pan fyddwch yn ychwanegu unrhyw strings i gydran Translate. Sylwch mai mewn amgylcheddau sydd â chyfrifoldebau read/write ar y allwedd API yn unig y bydd modd creu strings newydd i’w cyfieithu. Rydym yn argymell cael amgylchedd llwyfannu caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o’r fath, gan ychwanegu strings newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl atal eich prosiect cyfieithu rhag lleddfu gan ychwanegu strings newydd nad ydynt yn berthnasol.

Gwnewch yn siŵr i 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 byddwch yn wynebu unrhyw broblemau, teimlwch yn rhydd i gysylltu, a byddwn yn fwy na pharod i helpu.

Mae TacoTranslate yn caniatáu i chi leoleiddio eich cymwysiadau React yn awtomatig yn gyflym i ac o unrhyw iaith. Dechreuwch heddiw!