Yr ateb 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 ceisiadau sy'n gallu addasu i ddefnyddwyr o wahanol wledydd a diwylliannau. Un o'r ffyrdd allweddol i gyflawni hyn yw trwy rhyngwladoliad (i18n), sy'n eich galluogi i addasu'ch cais i ieithoedd, arian cyfred, a fformatau dyddiad gwahanol.

Mewn ymarfer hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoliad i'ch cais React Next.js, gyda rendro ochr y gweinydd. TL;DR: Gweler y mewnbwn cyflawn 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 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 mynegiadau yn awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, ac yn eich rhyddhau rhag rheoli diflas 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 rhyngwyneb defnyddiwr TacoTranslate, creuwch brosiect, a llywiwch i'r tab allweddi API. Creu 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 yng nghanol eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gwnewch yn siŵr peidio byth â datgelu’r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod lleoliad rhagddio diofyn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle caiff eich llinynnau eu cadw, megis URL eich gwefan. Darllenwch ragor am darddiadau yma.

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

Cam 3: Gosod TacoTranslate

I integreiddio TacoTranslate â'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 cyn bo hir.

Mae creu’r cleient mewn ffeil ar wahân yn ei gwneud hi’n haws ei defnyddio eto yn nes ymlaen. Nawr, gan ddefnyddio /pages/_app.tsx arferol, 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 chi eisoes pageProps a _app.tsx wedi’u haddasu, ewch ymlaen i estyn y diffiniad gyda’r eiddo a’r côd uchod.

Cam 4: Gweithredu rendro ochr 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 cyfieithiedig ar unwaith, yn lle fflach o gynnwys heb ei gyfieithu'n 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 newid /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'),
	});
};

Diwygiwch 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 ar y cam parato (isProduction is false), byddwn yn defnyddio’r allwedd API cyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon at gyfieithu.

Hyd yn hyn, rydym newydd sefydlu’r cais Next.js gyda rhestr o ieithoedd a gefnogir yn unig. Y cam nesaf fydd casglu cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, defnyddiwch naill ai getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn dibynnu ar eich anghenion.

Mae’r swyddogaethau hyn yn derbyn 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, fel bod eich cyfieithiadau yn aros yn gyfredol.

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

Dylai fod yn bosibl erbyn hyn i chi ddefnyddio'r cydran Translate i gyfieithu dolennau o fewn eich holl gydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Rhyddhau a phrofi!

Rydym wedi gorffen! Bydd eich cais Next.js yn cael ei gyfieithu yn awtomatig nawr 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 llinynnau newydd i’w cyfieithu. Rydym yn argymell cael amgylchedd staging caeedig a diogel 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 yn bosibl yn atal eich prosiect cyfieithu rhag ehangu’n ormodol drwy ychwanegu llinynnau newydd nad ydynt yn gysylltiedig.

Sicrhewch eich bod yn edrych ar yr enghraifft gyflawn yn ein proffil GitHub. Yno, fe gewch hefyd enghraifft o sut i wneud hyn gan ddefnyddio'r App Router ! Os byddwch yn wynebu unrhyw broblemau, teimlwch yn rhydd i gyswllt â ni, a byddwn yn fwy na pharod i helpu.

Mae TacoTranslate yn eich galluogi i leoleiddio eich ceisiadau React yn awtomatig yn gyflym i ac o unrhyw iaith. Dechreuwch heddiw!