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 sy'n gallu gofalu am ddefnyddwyr o wledydd a diwylliannau gwahanol. Un o'r ffyrdd allweddol i gyflawni hyn yw trwy rhyngwladoliad (i18n), sy'n eich galluogi i addasu eich cais i ieithoedd, arian cyfredau, 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: Edrychwch ar 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 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 llinellau testun yn awtomatig i unrhyw iaith gan ddefnyddio AI arloesol, ac yn eich rhyddhau rhag y gwaith llym 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 module, mae'n amser i greu 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 amgylcheddol. Yr allwedd read yw'r hyn yr ydym yn ei alw 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 datgelu'r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ochr cleient.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Y cod lleol rhagosodedig wrth ddychwelyd. 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. Darllenwch ragor am ddechreuadau yma.

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

Cam 3: Gosod TacoTranslate

I integreiddio TacoTranslate gyda’ch cymhwysiad, bydd angen i chi greu cleient gan ddefnyddio’r allweddi API a gafwyd yn gynharach. Er enghraifft, crëwch 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.

Creu’r cleient mewn ffeil ar wahân yn gwneud y peth yn haws i’w ddefnyddio eto’n ddiweddarach. Nawr, gan ddefnyddio /pages/_app.tsx wedi’i wneud yn benodol, 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 wedi’u haddasu a _app.tsx, estynnwch y diffiniad gyda’r eiddo a’r cod uchod os gwelwch yn dda.

Cam 4: Gweithredu rendro ochr y gweinydd

Mae TacoTranslate yn caniatáu 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 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 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 lwyfan gynnal (isProduction is false), byddwn yn defnyddio'r allwedd API gyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon at gyfieithu.

Hyd yn hyn, dim ond rhestr o ieithoedd a gefnogir ydym wedi'i sefydlu ar gyfer y cais Next.js. Y peth nesaf a wnawn yw nôl cyfieithiadau ar gyfer eich holl dudalennau. I wneud hynny, byddwch yn defnyddio getTacoTranslateStaticProps neu getTacoTranslateServerSideProps yn seiliedig ar eich anghenion.

Mae’r swyddogaethau hyn yn derbyn tri dadleuon: Un wrthrych Next.js Static Props Context, cyfluniad ar gyfer TacoTranslate, a phriodweddau dewisol Next.js. Sylwch fod revalidate ar getTacoTranslateStaticProps wedi’i osod i 60 fel diofyn, er mwyn sicrhau bod eich cyfieithiadau’n aros yn gyfredol.

I ddefnyddio unrhyw un o'r swyddogaethau hyn mewn tudalen, tybiwn 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 llinynau o fewn pob un o'ch cydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Ymgynlliwch a phrofwch!

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

Gwnewch yn siŵr i edrych ar y sampl gyflawn drosodd ar ein proffil GitHub. Yno, fe gewch 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.

Mae TacoTranslate yn caniatáu ichi leoleiddio’ch ceisiadau React yn awtomatig yn gyflym i ac o unrhyw iaith. Dechreuwch heddiw!