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 diwallu anghenion defnyddwyr o wledydd a diwylliannau gwahanol. Un o'r ffyrdd allweddol i gyflawni hyn yw rhyngwladoli (i18n), sy'n eich galluogi i addasu eich cymhwysiad i wahanol ieithoedd, arian cyfred, a fformatau dyddiad.

Yn y tiwtorial hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i'ch cymhwysiad React Next.js, gan ddefnyddio rendro ochr y gweinydd. TL;DR: Gweler yr enghraifft lawn yma.

Mae'r canllaw hwn ar gyfer cymwysiadau Next.js sy'n defnyddio'r Pages Router.
Os ydych yn defnyddio'r App Router, gweler y canllaw hwn yn lle hynny.

Cam 1: Gosod llyfrgell i18n

I weithredu rhyngwladoli yn eich cais Next.js, y cam cyntaf fydd dewis 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 llinynnau yn awtomatig i unrhyw iaith gan ddefnyddio AI blaengar, 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'r allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad, ac nid oes angen i chi ychwanegu cerdyn credyd.

Yn rhyngwyneb y cais TacoTranslate, creuwch brosiect a llywiwch i'r tab allweddi API. Creuwch un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylchedd. Y 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 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 ar ochr y cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod locale diofyn a ddefnyddir fel ateb. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle y caiff eich llinynnau testun eu storio, megis URL eich gwefan. Darllenwch ragor 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 a nodwyd uchod. 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.

Mae creu'r cleient mewn ffeil ar wahân yn ei gwneud yn haws ei ddefnyddio eto yn ddiweddarach. Nawr, gan ddefnyddio /pages/_app.tsx, 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 personoledig, ymestynnwch y diffiniad gyda'r priodoleddau a'r cod uchod.

Cam 4: Gweithredu rendro ar ochr y gweinydd

TacoTranslate yn caniatáu 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 osgoi 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 gwiriad isProduction i gyd-fynd â’ch cyfluniad. Os yw true, bydd TacoTranslate yn dangos yr allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf neu staging (isProduction is false), byddwn ni’n defnyddio’r allwedd API gyfrinachol read/write er mwyn sicrhau bod llinynnau newydd yn cael eu hanfon i’w cyfieithu.

Hyd yn hyn, rydym wedi gosod y cais Next.js gydag rhestr o ieithoedd a gefnogir yn unig. Y peth nesaf a wnawn yw cael cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, byddwch yn defnyddio naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn dibynnu ar eich gofynion.

Mae'r swyddogaethau hyn yn cymryd tri dadleuon: un wrthrych 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, er mwyn i'ch cyfieithiadau aros yn gyfredol.

I ddefnyddio unrhyw un o'r swyddogaethau mewn tudalen, gadewch inni dybio 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 nawr allu defnyddio'r cydran Translate i gyfieithu llinynau ym mhob un o'ch cydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Lansio a phrofi!

Dyna ni! Bydd eich cais Next.js bellach yn cael ei gyfieithu'n awtomatig pan ychwanegwch unrhyw llinynnau i gydran Translate. Noder mai dim ond amgylcheddau sydd â chaniatâd read/write ar yr allwedd API fydd yn gallu creu llinynnau newydd i'w cyfieithu. Rydym yn argymell cael amgylchedd rhag-rhyddhau caeedig a diogel lle gallwch brofi eich cais cynhyrchiol gyda allwedd API o'r fath, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun unrhywun rhag dwyn eich allwedd API gyfrinachol, ac yn bosibl rhag llwytho eich prosiect cyfieithu'n ormodol drwy ychwanegu llinynnau newydd nad ydynt 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!