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

Wrth i’r byd ddod yn fwy rhyngwladoli, mae’n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu ceisiadau sy’n gallu cyflwyno ar gyfer defnyddwyr o wledydd a diwylliannau gwahanol. Un o’r ffyrdd allweddol i gyflawni hyn yw drwy rhyngwladoli (i18n), sy’n caniatáu i chi addasu eich cais i wahanol ieithoedd, arian cyfredau, a fformatiau dyddiad.

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

Mae'r canllaw hwn ar gyfer ceisiadau Next.js sy'n defnyddio Pages Router.
Os ydych chi'n defnyddio'r App Router, gweler 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 y gwaith diflas o reoli 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 creu eich cyfrif TacoTranslate, prosiect cyfieithu, a allweddi API cysylltiedig. Creu cyfrif yma. Mae’n rhad ac am ddim, ac nid oes angen i chi ychwanegu cerdyn credyd.

Within the TacoTranslate application UI, create a project, and navigate to its API keys tab. Create one read key, and one read/write key. We’ll save them as environment variables. The read key is what we call public and the read/write key is secret. For example, you could add them to a .env file in the root of your project.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr na fyddwch erioed yn rhyddhau’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 lleol diofyn wrth gwrs wrth fethu. Yn y enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinynnau’n cael eu storio, megis 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’r 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 yn diffinio TACOTRANSLATE_API_KEY yn awtomatig yn fuan.

Creu'r cleient mewn ffeil ar wahân yw gwneud iddo fod yn haws i'w ddefnyddio eto yn nes ymlaen. Nawr, gan ddefnyddio /pages/_app.tsx wedi'i arferi, 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 ydych eisoes yn meddu ar pageProps a _app.tsx, defnyddiwch estyniad ar y diffiniad gyda'r priodoleddau a'r cod uchod.

Cam 4: Gweithredu rendro ochr y gweinydd

Mae TacoTranslate yn caniatáu ar gyfer renderu ochr y gweinydd o’ch cyfieithiadau. Mae hyn yn gwella’r profiad defnyddiwr yn sylweddol drwy ddangos cynnwys cyfieithiedig ar unwaith, yn hytrach na fflach o gynnwys heb ei gyfieithu yn gyntaf. Yn ogystal, gallwn gael heibio ceisiadau rhwydwaith ar y cleient, gan ein bod eisoes yn meddu ar 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 gwirio isProduction i addasu i'ch gosodiad. Os yw true, bydd TacoTranslate yn dangos y allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu lwyfan gynnal (isProduction is false), byddwn yn defnyddio'r allwedd API gyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon at gyfieithu.

Hyd yn hyn, rydym wedi sefydlu'r cais Next.js gyda rhestr o ieithoedd wedi'u cefnogi yn unig. Y cam nesaf fydd nôl cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, defnyddiwch naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn dibynnu ar eich gofynion.

Mae’r gweithrediadau hyn yn cymryd tri dadleuon: Un gwrthrych Next.js Static Props Context, cyfluniad ar gyfer TacoTranslate, a nodweddion dewisol Next.js. Nodwch fod revalidate ar getTacoTranslateStaticProps wedi’i osod i 60 yn ddiofyn, er mwyn i’ch cyfieithiadau aros yn gyfredol.

I ddefnyddio unrhyw un o’r gweithrediadau hyn mewn tudalen, dyweder eich bod wedi’ch 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 chi 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: Ymgynnull a phrofi!

Rydym wedi gorffen! Bydd eich cais React yn cael ei gyfieithu'n awtomatig yn awr pan fyddwch yn ychwanegu unrhyw linynnau i gydran Translate. Sylwch mai dim ond amgylcheddau gyda chaniatâd read/write ar allwedd API fydd yn gallu creu linynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staging caeedig ac wedi’i ddiogelu lle gallwch brofi eich cais cynhyrchu gyda allwedd API o'r fath, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac o bosibl yn atal eich prosiect cyfieithu rhag cynyddu'n ormodol drwy ychwanegu llinynnau newydd, anhysbys.

Gwnewch yn siŵr i gweld y darn cyflawn ar ein proffil GitHub. Yno, fe welwch hefyd enghraifft o sut i wneud hyn gan ddefnyddio App Router ! Os byddwch yn cael unrhyw broblemau, mae croeso i chi gysylltu â ni, a byddwn yn fwy na hapus i helpu.

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