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

Sut mae'n gweithio

Wrth i'r byd ddod yn fwy rhyngwladol, mae’n dod yn fwyfwy pwysig i ddatblygwyr gwe adeiladu cymwysiadau sy’n gallu diwallu anghenion defnyddwyr o wledydd a diwylliannau gwahanol. Un o’r ffyrdd allweddol o gyflawni hyn yw drwy rhyngwladoli (i18n), sy’n caniatáu i chi addasu eich cymhwysiad i ieithoedd, arianarthau, a fformatau dyddiad gwahanol.

Mewn ymarferoldeb hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i'ch cymhwysiad React Next.js, gyda rendro ochr y gweinydd. TL;DR: Gweler y 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.

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 y ddolen 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 rheoli blinedig ffeiliau JSON.

Gadewch i ni ei osod gan 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 creu eich cyfrif TacoTranslate, prosiect cyfieithu, a allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad ac am ddim, ac nid oes angen ichi ychwanegu cerdyn credyd.

O fewn UI’r cais TacoTranslate, creu prosiect, a llywio i’r tab allweddi API. Creu un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel amgylchedd newidynnau. Yr allwedd read yw’r hyn a galwn yn public, a’r allwedd read/write yw’r secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yng nghwrs eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr na fyddwch byth yn rhyddhau’r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod iaith drefnus diofyn. Yn yr 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. Darllen mwy 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, 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 cyn bo hir.

Creu’r cleient mewn ffeil ar wahân mae’n gwneud hi’n haws i’w ddefnyddio eto yn ddiweddarach. Nawr, gan ddefnyddio /pages/_app.tsx wedi'i addasu, byddwn yn 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 chi eisoes pageProps a _app.tsx wedi'u haddasu, gwnewch estyniad o'r 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 trwy ddangos cynnwys wedi’i gyfieithu ar unwaith, yn hytrach na fflach 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 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 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 gosod y cais Next.js gyda rhestr o ieithoedd a gefnogir yn unig. Y cam nesaf fydd tynnu 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 cael tri dadleuon: Un gwrthrych Next.js Static Props Context, ffurfweddiad ar gyfer TacoTranslate, a phriodweddau dewisol Next.js. Nodwch fod revalidate ar getTacoTranslateStaticProps wedi ei osod i 60 yn ddiofyn, er mwyn i’ch cyfieithiadau aros yn gyfredol.

I ddefnyddio un o’r swyddogaethau ar mewn tudalen, rhagdybiaf fod 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: Ymgynnull a phrofi!

Rydyn ni wedi gorffen! Bydd eich cais Next.js yn cael ei gyfieithu'n awtomatig nawr pan fyddwch chi'n ychwanegu unrhyw linynnau i gydran Translate. Sylwch mai dim ond amgylcheddau gyda chodau caniatâd read/write ar y allwedd API fydd yn gallu creu linynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd staged clo ac wedi'i ddiogelu lle gallwch chi brofi eich cais cynhyrchu gyda allwedd API fel yna, gan ychwanegu linynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun rhag dwyn eich allwedd API gyfrinachol, ac yn gallu cynyddu maint eich prosiect cyfieithu drwy ychwanegu linynnau newydd, sydd ddim yn gysylltiedig.

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!