Y datrysiad gorau ar gyfer rhyngwladoli (i18n) mewn apiau Next.js

Sut mae'n gweithio

Wrth i'r byd ddod yn fwy byd-eang, mae'n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu cymwysiadau sy'n gallu gwasanaethu defnyddwyr o wahanol wledydd a diwylliannau. Un o'r ffyrdd allweddol o gyflawni hyn yw trwy ryngwladoli (i18n), sy'n eich galluogi i addasu eich cais i ieithoedd, arian cyfred, a fformatau dyddiad gwahanol.

Mewn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i'ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: See the full example here.

Mae'r canllaw hwn ar gyfer ceisiadau Next.js sydd yn 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, dewiswn eisoes 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 llinellau testun yn awtomatig i unrhyw iaith gan ddefnyddio AI modern, 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.

O fewn UI cymhwysiad TacoTranslate, creu prosiect, a llywio i'r tab allweddi API. Creu un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylchedd. Mae'r allwedd read yn yr hyn yr ydym yn ei alw yn public, ac mae'r allwedd read/write yn secret. Er enghraifft, gallech eu hychwanegu i ffeil .env yn wraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr i byth lledaenu’r allwedd API cyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod locale diofyn wrth i chi ddewis opsiwn yn ôl. Yn yr enghraifft hon, byddwn yn ei gosod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle bydd eich llinellau yn cael eu cadw, fel URL eich gwefan. Darllenwch fwy am darddiadau yma.

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

Cam 3: Sefydlu 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 ni'n diffinio TACOTRANSLATE_API_KEY yn awtomatig yn fuan.

Creu’r cleient mewn ffeil ar wahân mae’n ei gwneud hi’n haws ei ddefnyddio eto yn y dyfodol. Nawr, gan ddefnyddio /pages/_app.tsx wedi’i addasu, 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 addasu, estynnwch y diffiniad gyda’r eiddo a’r cod uchod.

Cam 4: Gweithredu rendro ochr y gweinydd

Mae TacoTranslate yn caniatáu ar gyfer rendro 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 ogystal, gallwn neidio dros alwadau rhwydwaith ar y cleient, oherwydd bod gennym eisoes yr holl gyfieithiadau sydd eu hangen arnom.

Byddwn yn dechrau drwy greu neu ddiwygio /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 arddangos y bysell API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu brif gynllun (isProduction is false), byddwn yn defnyddio’r allwedd API gyfrinachol read/write i sicrhau bod llythyrau newydd yn cael eu hanfon i gyfieithu.

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 un o 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 ddewisol Next.js. Sylwch fod revalidate ar getTacoTranslateStaticProps wedi’i osod i 60 yn ddiofyn, er mwyn i’ch cyfieithiadau aros yn gyfredol.

I ddefnyddio un o’r swyddogaethau hyn mewn tudalen, gadewch i ni ddychmygu 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!"/>;
}

Dylech chi nawr allu defnyddio'r cydran Translate i gyfieithu llinynnau mewn pob un o'ch cydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Dosbarthu a phrofi!

Rydym wedi gorffen! Bydd eich cais Next.js yn cael ei gyfieithu yn awtomatig nawr pan ychwanegwch unrhyw stringiau i gydran Translate. Nodwch mai dim ond amgylcheddau gyda pheryglon read/write ar allwedd API fydd yn gallu creu stringiau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd camu caeedig a diogel lle gallwch brofi eich cais cynhyrchu gyda allwedd API o'r fath, gan ychwanegu stringiau newydd cyn mynd yn fyw. Bydd hyn yn helpu i atal unrhywun rhag dwyn eich allwedd API gyfrinachol, ac efallai'n ychwanegu gormod o stringiau newydd, heb gysylltiad, i'ch prosiect cyfieithu.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!