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

Wrth i'r byd ddod yn fwy byd-eang, mae'n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu cymwysiadau sydd yn gallu ymateb i ddefnyddwyr 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, 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 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 chi'n defnyddio'r App Router, gweler y canllaw hwn yn lle hynny, os gwelwch yn dda.

Cam 1: Gosod llyfrgell i18n

I roi rhyngwladoliad ar waith yn eich cais Next.js, byddwn yn dewis llyfrgell i18n yn gyntaf. Mae sawl llyfrgell adnabyddus, 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 datblygedig, ac yn eich rhyddhau rhag y driniaeth ddiflas o ffeiliau JSON.

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

npm install tacotranslate

Cam 2: Creu cyfrif TacoTranslate am ddim

Now that you’ve got the module installed, it’s time to create your TacoTranslate account, a translation project, and associated API keys. Creu cyfrif yma. Mae’n rhad ac am ddim, ac nid yw’n gofyn i chi ychwanegu cerdyn credyd.

Y tu mewn i UI ap TacoTranslate, creu project, a llywio i'i dab allweddi API. Creu un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylchedd. Yr allwedd read yw'r hyn a elwir yn public, a'r allwedd read/write yw secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn wreiddyn eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod locale llithiant diofyn. Yn y enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinynnau yn cael eu cadw, megis URL eich gwefan. Darllenwch fwy am darddiadau yma.

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

Cam 3: Sefydlu TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 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 eisoes pageProps a _app.tsx wedi'u haddasu, estynnwch y diffiniad gyda'r eiddo a'r cod o'r uchod os gwelwch yn dda.

Cam 4: Gweithredu rendro ochr y gweinydd

Mae TacoTranslate yn caniatáu ar gyfer rendro ochr y gweinydd eich cyfieithiadau. Mae hyn yn gwella profiad y defnyddiwr yn fawr drwy ddangos cynnwys wedi'i gyfieithu ar unwaith, yn lle fflach o gynnwys heb ei gyfieithu'n gyntaf. Yn ogystal, gallwn hepgor ceisiadau rhwydwaith ar y cleient, oherwydd mae 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'),
	});
};

Addasu'r gwiriad isProduction i weddu i'ch gosodiad. Os true, bydd TacoTranslate yn wynebu'r allwedd API gyhoeddus. Os ydym mewn amgylchedd lleol, prawf neu lwyfannu (isProduction is false), byddwn yn defnyddio'r allwedd API read/write gyfrinachol i wneud yn siŵr bod llinynnau newydd yn cael eu hanfon i'w cyfieithu.

Hyd yn hyn, dim ond rhestr o ieithoedd a gefnogir yr ydym wedi sefydlu'r cais Next.js. Y peth nesaf y byddwn yn ei wneud 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 ffwythiannau hyn yn cymryd tri dadl: 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 bod eich cyfieithiadau yn aros yn gyfredol.

I ddefnyddio'r naill swyddogaeth neu'r llall mewn tudalen, gadewch i ni dybio bod gennych ffeil dudalen 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: Rhoi ar waith a phrofi!

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

Gwnewch yn siŵr eich bod yn edrych ar yr enghraifft gyflawn drosodd 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 pharod i helpu.

Dechreuwch heddiw!