Next.js अ‍ॅप्ससाठी आंतरराष्ट्रीयीकरण (i18n) साठी सर्वोत्तम उपाय

हे कसे काम करते

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

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

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

पाऊल 1: i18n लायब्ररी इन्स्टॉल करा

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

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

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

npm install tacotranslate

पायरी २: विनामूल्य 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 की क्लायंट साइड उत्पादन वातावरणात लीक करू नका.

आम्ही आणखी दोन पर्यावरणीय चल (environment variables) जोडू: 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 असतील, तर वरील गुणधर्मे आणि कोडसह त्याची व्याख्या वाढवा.

पाऊल ४: सर्व्हर साइड रेंडरिंग अमलात आणणे

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 डिफॉल्टने ६० वर सेट केले आहे, ज्यामुळे तुमचे भाषांतर नेहमी अपडेटेड राहील.

एखादा फंक्शन पेजमध्ये वापरण्यासाठी, समजा तुमच्याकडे असा पेज फाइल आहे /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!"/>
}

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

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!