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

हे कसे कार्य करते

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

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

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

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

आपल्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण लागू करण्यासाठी, आम्ही प्रथम एका 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 प्रॉपर्टीज. लक्षात ठेवा की 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!"/>
}

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

काम पूर्ण झाले! आपले Next.js अनुप्रयोग आता Translate घटकात कोणतीही स्ट्रिंग जोडल्यावर स्वयंचलितपणे भाषांतरित होईल. लक्षात ठेवा की केवळ त्या वातावरणांना ज्यांच्याकडे 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!