Pages Router वापरणाऱ्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण कसे अंमलात आणावे

जागतिकीकरण वाढत असताना, वेब डेव्हलपरसाठी वेगवेगळ्या देशां आणि संस्कृतींमधील वापरकर्त्यांची गरजा पूर्ण करणार्या अॅप्लिकेशन्स तयार करणे अधिक महत्त्वाचे होत आहे. हे साध्य करण्याचा एक मुख्य मार्ग म्हणजे इंटरनॅशनलायझेशन (i18n), ज्याद्वारे आपण आपल्या अॅप्लिकेशनला वेगवेगळ्या भाषा, चलन आणि दिनांकाच्या स्वरूपानुसार अनुकूल करू शकता.

या ट्यूटोरियलमध्ये, आपण सर्व्हर साईड रेंडरिंगसह आपल्या React Next.js अॅप्लिकेशनमध्ये इंटरनॅशनलायझेशन कसे जोडायचे हे पाहणार आहोत. TL;DR: पूर्ण उदाहरण येथे पहा.

हा मार्गदर्शक Next.js अनुप्रयोगांसाठी आहे जे Pages Router वापरत आहेत.
आपण App Router वापरत असाल, तर कृपया हा मार्गदर्शक पाहा.

चरण 1: i18n लायब्ररी स्थापित करा

आपल्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण (i18n) राबवण्यासाठी, आपण प्रथम एक i18n लायब्ररी निवडू. काही लोकप्रिय लायब्ररी उपलब्ध आहेत, जसे की next-intl. परंतु या उदाहरणात, आम्ही TacoTranslate वापरणार आहोत.

TacoTranslate अत्याधुनिक AI वापरून आपला मजकूर कोणत्याही भाषेत स्वयंचलितपणे अनुवादित करते आणि JSON फाइल्सच्या कष्टदायक व्यवस्थापनापासून आपल्याला मुक्त करते.

चला ते आपल्या टर्मिनलमध्ये npm वापरून इन्स्टॉल करू:

npm install tacotranslate

Step 2: TacoTranslate चे विनामूल्य खाते तयार करा

मॉड्यूल इन्स्टॉल केल्यावर, आता TacoTranslate खाते, एक अनुवाद प्रकल्प आणि संबंधित API की तयार करण्याची वेळ आहे. येथे खाते तयार करा. हे विनामूल्य आहे, आणि यासाठी तुम्हाला क्रेडिट कार्ड जोडण्याची आवश्यकता नाही.

TacoTranslate अॅप्लिकेशनच्या UI मध्ये, एक प्रोजेक्ट तयार करा आणि त्याच्या API keys टॅबवर जा. एक read की तयार करा आणि एक read/write की तयार करा. आम्ही त्यांना पर्यावरण चल (environment variables) म्हणून जतन करू. read की जी आपण public म्हणतो आणि read/write की ही secret असते. उदाहरणार्थ, तुम्ही त्यांना तुमच्या प्रोजेक्टच्या रूटमधील .env फाईलमध्ये जोडू शकता.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

कृपया खात्री करा की गुप्त read/write API की कधीही क्लायंट साइड प्रॉडक्शन वातावरणात लीक होऊ नये.

आम्ही आणखी दोन पर्यावरण चल देखील जोडणार आहोत: TACOTRANSLATE_DEFAULT_LOCALE आणि TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: डिफॉल्ट फॉलबॅक लोकल कोड. या उदाहरणात, आम्ही ते इंग्रजीसाठी en असे सेट करू.
• TACOTRANSLATE_ORIGIN: ज्या "फोल्डर" मध्ये तुमच्या स्ट्रिंग्ज साठवल्या जातील, उदाहरणार्थ तुमच्या वेबसाइटचा URL. ऑरिजिन्सबद्दल इथे अधिक वाचा.

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

पायरी ३: TacoTranslate सेट करणे

आपल्या अनुप्रयोगात TacoTranslate समाकलित करण्यासाठी, पूर्वीची API की वापरून एक क्लायंट तयार करणे आवश्यक आहे. उदाहरणार्थ, /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;

आम्ही लवकरच TACOTRANSLATE_API_KEY आपोआप परिभाषित करणार आहोत.

क्लायंट एका वेगळ्या फाइलमध्ये तयार केल्याने नंतर ते पुन्हा वापरणे सोपे होते. आता, कस्टम /pages/_app.tsx वापरून, आपण 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>
	);
}

जर तुमच्याकडे आधीच सानुकूल pageProps आणि _app.tsx असतील, तर कृपया वरील गुणधर्म आणि कोडसह त्या परिभाषा विस्तारित करा.

चरण 4: सर्व्हर-साइड रेंडरिंगची अंमलबजावणी

TacoTranslate तुमच्या अनुवादांसाठी सर्व्हर साइड रेंडरिंगची अनुमती देते. यामुळे वापरकर्त्याचा अनुभव मोठ्या प्रमाणात सुधारतो कारण अनुवादित सामग्री ताबडतोब दाखवली जाते, अनुवादित नसलेली सामग्री आधी क्षणभर दिसण्याऐवजी. याव्यतिरिक्त, क्लायंटवरच्या नेटवर्क विनंत्या टाळता येतात, कारण आमच्याकडे आधीच सर्व आवश्यक अनुवाद उपलब्ध आहेत.

आम्ही /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'),
	});
};

आपल्या सेटअपनुसार isProduction तपासणी सानुकूल करा. जर true असेल, तर TacoTranslate सार्वजनिक API की प्रदर्शित करेल. जर आपण स्थानिक, चाचणी किंवा स्टेजिंग वातावरणात असू (isProduction is false), तर नवीन स्ट्रिंग्स अनुवादासाठी पाठवल्या जातील याची खात्री करण्यासाठी आम्ही गुप्त read/write API की वापरणार आहोत.

आत्तापर्यंत, आपण Next.js अनुप्रयोगात फक्त समर्थित भाषाांची यादी सेट केली आहे. पुढचे आपण जे करणार आहोत ते म्हणजे आपल्या सर्व पृष्ठांसाठी अनुवाद मिळवणे. तसे करण्यासाठी, आपल्या गरजेनुसार getTacoTranslateStaticProps किंवा getTacoTranslateServerSideProps वापराल.

हे फंक्शन्स तीन आर्ग्युमेंट घेतात: एक Next.js Static Props Context ऑब्जेक्ट, TacoTranslate साठी कॉन्फिगरेशन, आणि ऐच्छिक Next.js प्रॉपर्टीज. लक्षात घ्या की revalidate वर getTacoTranslateStaticProps हा डीफॉल्टनं 60 वर सेट केलेला आहे, त्यामुळे तुमचे अनुवाद अद्ययावत राहतील.

पृष्ठात कोणतेही फंक्शन वापरण्यासाठी, समजा तुमच्याकडे /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!"/>;
}

आता आपण आपल्या सर्व React घटकांमधील स्ट्रिंग्ज भाषांतर करण्यासाठी Translate घटक वापरू शकता.

import {Translate} from 'tacotranslate/react';

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

पायरी 5: तैनात करा आणि चाचणी करा!

आम्ही पूर्ण झाले! आपल्या React अनुप्रयोगाचे भाषांतर आता Translate कॉम्पोनंटमध्ये आपण कोणतेही स्ट्रिंग जोडल्यावर आपोआप होईल. लक्षात ठेवा की API कीवर read/write परवानग्या असलेलीच वातावरणे भाषांतरासाठी नवीन स्ट्रिंग तयार करू शकतील. आम्ही शिफारस करतो की असे एक बंद आणि सुरक्षित स्टेजिंग वातावरण ठेवा जिथे आपण अशा API कीसह आपल्या उत्पादन अनुप्रयोगाची चाचणी करू शकता आणि लाईव्ह करण्याआधी नवीन स्ट्रिंग जोडू शकता. हे कोणालाही तुमची गुप्त API की चोरण्यापासून रोखेल आणि असंबंधित नवीन स्ट्रिंग जोडून तुमच्या अनुवाद प्रकल्पाची अनावश्यक वाढ टाळेल.

आमच्या GitHub प्रोफाइलवर नक्कीच पूर्ण उदाहरण पहा. तिथे, तुम्हाला हे कसे करायचे याचे App Router वापरून केलेले एक उदाहरणही सापडेल! जर तुम्हाला काही समस्या आल्यास, मोकळेपणाने संपर्क करा, आणि आम्हाला मदत करण्यात आनंद होईल.

TacoTranslate आपले React अनुप्रयोग 75 हून अधिक भाषांमध्ये आणि त्या भाषांमधून स्वयंचलितपणे आणि जलदपणे स्थानिकीकरण करण्यास परवानगी देते. आजच प्रारंभ करा!