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

Jinsi inavyofanya kazi

Wakati dunia inavyokuwa ya kimataifa zaidi, ni muhimu zaidi kwa waendelezaji wa wavuti kujenga programu zinazoweza kuwahudumia watumiaji kutoka kwa nchi na tamaduni tofauti. Mojawapo ya njia muhimu za kufanikisha hili ni kupitia uanzishaji wa kimataifa (i18n), ambao hukuruhusu kurekebisha programu yako kwa lugha, sarafu, na miundo ya tarehe tofauti.

Katika mafunzo haya, tutajifunza jinsi ya kuongeza uanzishaji wa kimataifa kwenye programu yako ya React Next.js, kwa kutumia uonyeshaji upande wa seva. TL;DR: Tazama mfano kamili hapa.

Malazi hii ni kwa ajili ya programu za Next.js zinazotumia Pages Router.
Ikiwa unatumia App Router, tafadhali angalia malazi hii badala yake.

Hatua ya 1: Sakinisha maktaba ya i18n

Ili kutekeleza utafsiri wa lugha nyingi katika programu yako ya Next.js, kwanza tutachagua maktaba ya i18n. Kuna maktaba kadhaa maarufu, zikiwemo next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.

TacoTranslate hutafsiri moja kwa moja mistari yako kwenda lugha yoyote kwa kutumia AI ya kisasa, na inakuokoa kutoka kwa usimamizi wa kuchosha wa faili za JSON.

Hebu tuiweke kwa kutumia npm kwenye terminal yako:

npm install tacotranslate

Hatua ya 2: Unda akaunti ya bure ya TacoTranslate

Sasa kwani umeweka moduli hiyo, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Tengeneza akaunti hapa. Ni bure, na haitaji uweke kadi ya mkopo.

Ndani ya kiolesura cha programu ya TacoTranslate, tengeneza mradi, na uelekee kwenye kichupo cha API keys. Tengeneza ufunguo mmoja wa read na ufunguo mmoja wa read/write. Tutayahifadhi kama vigezo vya mazingira. Ufunguo wa read ndio tunaoita public na ufunguo wa read/write ni secret. Kwa mfano, unaweza kuyaongeza kwenye faili ya .env katika mzizi wa mradi wako.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hakikisha haumashi kamwe ufunguo wa siri wa read/write API kwa mazingira ya uzalishaji upande wa mteja.

Tutatoa pia mabadiliko mawili zaidi ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE na TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Msimbo wa lugha ya kuepukia chaguo-msingi. Katika mfano huu, tutaweka kuwa en kwa Kiingereza.
• TACOTRANSLATE_ORIGIN: “Folda” ambapo mistari yako itawekwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.

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

Hatua ya 3: Kuweka TacoTranslate

Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja kwa kutumia funguo za API kutoka hapo awali. Kwa mfano, unda faili inayoitwa /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 tukifafanua kiotomatiki TACOTRANSLATE_API_KEY hivi karibuni.

Kutengeneza mteja katika faili tofauti kunafanya iwe rahisi kutumia tena baadaye. Sasa, kwa kutumia /pages/_app.tsx maalum, tutaongeza mtoaji 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 za kawaida na _app.tsx, tafadhali panua ufafanuzi huo kwa vikundi na msimbo kutoka juu.

Hatua ya 4: Kutekeleza utafsiri upande wa seva

TacoTranslate inaruhusu uwasilishaji wa tafsiri zako upande wa seva. Hii inaboresha sana uzoefu wa mtumiaji kwa kuonyesha maudhui yaliyotafsiriwa mara moja, badala ya kuonyesha maudhui yasiyotafsiriwa kwa muda mfupi kwanza. Zaidi ya hayo, tunaweza kupita maombi ya mtandao kwa mteja, kwa sababu tayari tunayo 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.

Mpaka sasa, tumeweka tu programu ya Next.js na orodha ya lugha zinazotendeka. Kile tunachotakacho kufanya sasa ni kupata tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps au getTacoTranslateServerSideProps kulingana na mahitaji yako.

Hizi functions zinachukua hoja tatu: Kifaa kimoja cha Next.js Static Props Context, usanidi wa TacoTranslate, na mali za hiari za Next.js. Kumbuka kwamba revalidate kwenye getTacoTranslateStaticProps imesanidiwa kwa 60 kwa default, ili tafsiri zako ziendelee kuwa za kisasa.

Ili kutumia mojawapo ya function hizi kwenye ukurasa, tuseme una faili la 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 vipengele vyote vya React vyako.

import {Translate} from 'tacotranslate/react';

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

Hatua ya 5: Peleka na jaribu!

Tumemaliza! Programu yako ya Next.js sasa itatafsirika moja kwa moja unapoongeza mistari yoyote kwenye sehemu ya Translate. Kumbuka kwamba mazingira yenye ruhusa za read/write kwa ufunguo wa API ndizo zinazoweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza kuwa na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa ufunguo wa API kama huo, ukiongeza mistari mipya kabla ya kuanza rasmi. Hii itazuia mtu yeyote kuiba ufunguo wako wa siri wa API, na pia kuzuia mradi wako wa tafsiri kufifia kwa kuongeza mistari mipya isiyo husiana.

Hakikisha kutembelea mfano kamili kwenye profaili yetu ya GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hivi ukitumia App Router! Ikiwa unakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.

TacoTranslate inakuwezesha kuandika moja kwa moja programu zako za React haraka kwenda na kutoka kwa lugha yoyote. Anza leo!