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

टप्पा 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

पायरी 3: 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 प्रॉपर्टीज. लक्षात घ्या की getTacoTranslateStaticProps मधील revalidate डीफॉल्टनुसार 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 पेक्षा जास्त भाषांमध्ये जलद आणि स्वयंचलितपणे स्थानिकीकरण करण्यास सक्षम करते. आजच सुरू करा!