Sut i weithredu rhyngwladoli mewn ap Next.js sy'n defnyddio'r Pages Router

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

Mewn ymarfer hwn, byddwn yn archwilio sut i ychwanegu rhyngwladoli i’ch cais 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 yn defnyddio’r App Router, gweler y canllaw hwn yn lle hynny.

Cam 1: Gosod llyfrgell i18n

I wireddu rhyngwladoli eich cais Next.js, byddwn yn dewis llyfrgell i18n yn gyntaf. Mae sawl llyfrgell boblogaidd, gan gynnwys next-intl. Fodd bynnag, yn y ddelwedd 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 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.

Ym mhersonfa defnyddiwr ap TacoTranslate, crëwch brosiect, a llywiwch i'r tab allweddi API. Creëwch un allwedd read, a un allwedd read/write. Byddwn yn eu cadw fel amrywiadau amgylcheddol. Y allwedd read yw yr hyn a elwir yn public a'r allwedd read/write yw secret. Er enghraifft, gallech ychwanegu nhw at ffeil .env yng ngwraidd eich prosiect.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Cod locale diofyn wrth gefn. Yn y drafodaeth 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 fwy am darddiadau 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 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 yn fuan.

Mae creu’r cleient mewn ffeil ar wahân yn gwneud ei defnyddio eto yn haws yn ddiweddarach. Nawr, gan ddefnyddio /pages/_app.tsx wedi’i deilwra, 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 personol, 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 eich 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 neidio dros geisiadau 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 fodloni’ch gosodiad. Os yw true, bydd TacoTranslate yn dangos yr allwedd API cyhoeddus. Os ydym mewn amgylchedd lleol, prawf, neu gamu ymlaen (isProduction is false), byddwn yn defnyddio’r allwedd API gyfrinachol read/write i sicrhau bod llinynnau newydd yn cael eu hanfon i’w cyfieithu.

Hyd yn hyn, rydyn ni wedi sefydlu’r 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 dibynnu ar eich gofynion.

Mae’r swyddogaethau hyn yn derbyn tri dadleuon: Un gwrthrych Next.js Static Props Context, ffurfweddiad ar gyfer TacoTranslate, a phriodweddau Dewisol Next.js. Nodwch fod revalidate ar getTacoTranslateStaticProps wedi’i osod i 60 fel diofyn, er mwyn i’ch cyfieithiadau aros yn gyfredol.

I ddefnyddio unrhyw un o’r swyddogaethau mewn tudalen, tybiwn fod 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 chi allu defnyddio’r cydran Translate yn awr i gyfieithu llinynnau o fewn eich holl gydrannau React.

import {Translate} from 'tacotranslate/react';

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

Cam 5: Gollwng a phrofi!

Rydym wedi gorffen! Bydd eich cais React yn cael ei gyfieithu’n awtomatig wrth i chi ychwanegu unrhyw rannau testun i gydran Translate. Nodwch na fydd dim ond amgylcheddau sydd â chaniatâd read/write ar allwedd API a all greu rannau testun newydd i’w cyfieithu. Argymhellwn gael amgylchedd camu mewn sy’n gaeedig ac wedi’i ddiogelu lle gallwch brofi eich cais cynhyrchiol gyda allwedd API o’r fath, gan ychwanegu testunau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhywun rhag dwyn eich allwedd API gyfrinachol, ac erydu’ch prosiect cyfieithu drwy ychwanegu testunau newydd sy’n annibynnol.

Gwnewch yn siŵr i ddilyn y dangosydd cyflawn ar ein proffil GitHub. Yno, fe welwch hefyd enghraifft o sut i wneud hyn gan ddefnyddio App Router! Os cewch chi unrhyw broblemau, teimlwch yn rhydd i gysylltu, a byddwn yn fwy na pharod i helpu.

Mae TacoTranslate yn eich galluogi i leoleiddio eich ceisiadau React yn awtomatig yn gyflym i ac oddi wrth dros 75 o ieithoedd. Dechreuwch heddiw!