Suluhisho bora kwa uundaji wa kimataifa (i18n) katika programu za Next.js

Jinsi inavyofanya kazi

Kadri dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa watengenezaji wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni mbalimbali. Mojawapo ya njia kuu za kufanikisha hili ni kupitia uingizaji wa kimataifa (i18n), ambao unakuwezesha kuoanisha programu yako kwa lugha, sarafu, na muundo wa tarehe tofauti.

Katika mafunzo haya, tutaangalia jinsi ya kuongeza uingizaji wa kimataifa kwenye programu yako ya React Next.js, kwa kutumia server side rendering. TL;DR: Tazama mfano kamili hapa.

Miongozo hii ni kwa ajili ya programu za Next.js zinazotumia Pages Router.
Kama unatumia App Router, tafadhali tazama mwongozo huu badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utofauti wa lugha katika programu yako ya Next.js, kwanza tutachagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, ikiwa ni pamoja na next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri kiotomatiki misemo yako kwa lugha yoyote kwa kutumia AI ya kisasa, na inakuondolea usumbufu wa kusimamia faili za JSON.

Tuingize kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa kwa kuwa umesakinisha moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na huhitaji kuongeza kadi ya mkopo.

Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, kisha nenda kwenye kichupo cha funguo za API. Tengeneza ufunguo mmoja wa read, na ufunguo mmoja wa read/write. Tutaoweka kama vigezo vya mazingira. Ufunguo wa read ndio tunaoita public na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuziweka kwenye faili la .env kwenye mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha hauwahi kuvuja siri ya ufunguo wa API wa read/write kwenda mazingira ya uzalishaji wa upande wa mteja.

Pia tutaongeza vinginevi viwili vya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa lugha ya msingi ya chaguo-msingi. Katika mfano huu, tutaiweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: "Folda" ambapo mfuatano wa maneno yako utahifadhiwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.

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

Hatua ya 3: Kuanzisha TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja ukitumia funguo za API kutoka awali. Kwa mfano, tengeneza faili yenye jina /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;

Tutakuwa tukibainisha kiotomatiki TACOTRANSLATE_API_KEY hivi punde.

Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx maalum, tutaongeza mtoa huduma wa 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>
	);
}

Ikiwa tayari una pageProps na _app.tsx zilizobinafsishwa, tafadhali panua ufafanuzi huo kwa mali na msimbo ulio hapo juu.

Hatua ya 4: Kuanzisha upakiaji wa upande wa seva

TacoTranslate inaruhusu kutekeleza utafsiri wako upande wa seva. Hii inaongeza sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya mwangaza wa maudhui ambayo bado hayajatafsiriwa kwanza. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao kwenye mteja, kwa sababu tayari tuna tafsiri zote tunazohitaji.

Tutaanza kwa kuunda au kubadilisha /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'),
	});
};

Rekebisha ukaguzi wa isProduction ili kuendana na usanidi wako. Ikiwa true, TacoTranslate itaonyesha ufunguo wa API ya umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya jukwaa (isProduction is false), tutatumia kitufe cha siri read/write API ili kuhakikisha kuwa mifuatano mipya inatumwa kwa tafsiri.

Hadi sasa, tumeweka tu programu ya Next.js na orodha ya lugha zinazotolewa msaada. Kitu kinachofuata tutakachofanya ni kupata tafsiri za kurasa zako zote. Kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Funguo hizi zinachukua hoja tatu: Kitu kimoja cha Next.js Static Props Context, usanidi wa TacoTranslate, na mali za hiari za Next.js. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imewekwa kwa 60 kwa chaguo-msingi, ili tafsiri zako zibaki za kisasa.

Ili kutumia moja ya funguo hizi kwenye ukurasa, tuchukulie kuwa una faili ya ukurasa kama /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!"/>;
}

Sasa unapaswa kuwa na uwezo wa kutumia sehemu ya Translate kutafsiri mistari ndani ya sehemu zako zote za React.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Sambaza na jaribu!

Tumeikamilisha! Programu yako ya Next.js sasa itatafsiriwa kiotomatiki unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwenye API key pekee ndio yataweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya jaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji ukiwa na API key kama hiyo, ukiongeza mistari mipya kabla ya kuanzia rasmi. Hii itazuia mtu yeyote kuiba API key yako ya siri, na pia kuepuka kupanua mradi wako wa tafsiri kwa kuongeza mistari mipya isiyo husiana.

Hakikisha kutembelea mfano kamili kwenye wasifu wetu wa GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hivi kwa kutumia App Router ! Ikiwa utakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.

TacoTranslate inakuwezesha kutafsiri programu zako za React kiotomatiki haraka kwenda na kutoka lugha yoyote. Anza leo!