Next.js अॅप्समधील आंतरराष्ट्रीयीकरणासाठी (i18n) सर्वोत्तम समाधान
आपला Next.js अनुप्रयोग नवीन बाजारपेठांमध्ये विस्तारित करण्याचा विचार करत आहात का? TacoTranslate आपला Next.js प्रोजेक्ट स्थानिकरण करणे अतिशय सोपे बनवते, ज्यामुळे आपण अधिक कष्ट न करता जागतिक प्रेक्षकांपर्यंत पोहोचू शकता.
Next.js साठी TacoTranslate का निवडावे?
- सातत्यपूर्ण एकत्रीकरण: Next.js अनुप्रयोगांसाठी खास डिझाइन केलेले, TacoTranslate आपला विद्यमान कार्यप्रवाह सहजपणे एकत्र करते.
- स्वयंचलित स्ट्रिंग संग्रह: JSON फाइल्स हाताने व्यवस्थापित करण्याची आवश्यकता नाही. TacoTranslate आपला कोडबेसमधून स्वयंचलितपणे स्ट्रिंग जमा करते.
- एआय-चालित भाषांतर: आपल्या अनुप्रयोगाच्या टोनशी जुळणारी संदर्भानुसार अचूक भाषांतर देण्यासाठी एआयची क्षमता वापरा.
- तत्काळ भाषा समर्थन: फक्त एका क्लिकने नवीन भाषांसाठी समर्थन जोडा, ज्यामुळे आपला अनुप्रयोग जागतिक स्तरावर उपलब्ध होतो.
हे कसे कार्य करते
जसे जग अधिक जागतिक होत चालले आहे, तसे वेब विकसकांसाठी अशी अॅप्लिकेशन तयार करणे अधिक महत्वाचे होते जे विविध देशांतील आणि संस्कृतीतील वापरकर्त्यांसाठी अनुकूल असू शकतात. हे साध्य करण्याचा एक मुख्य मार्ग म्हणजे आंतरराष्ट्रीयीकरण (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
पायरी २: मोफत TacoTranslate खाते तयार करा
आता जेव्हा तुम्ही मॉड्यूल इन्स्टॉल केले आहे, तेव्हा तुमचे TacoTranslate खाते, एक अनुवाद प्रकल्प, आणि संबंधित API की तयार करण्याची वेळ आली आहे. येथे खाते तयार करा. हे मोफत आहे, आणि तुम्हाला क्रेडिट कार्ड जोडण्याची गरज नाही.
TacoTranslate ऍप्लिकेशन UI मध्ये, एक प्रोजेक्ट तयार करा आणि त्याच्या API keys टॅबवर जा. एक read
की तयार करा, आणि एक read/write
की तयार करा. आपण त्यांना पर्यावरणीय चल म्हणून जतन करू. 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
पाऊल ३: 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!"/>
}
पायरी 5: तैनात करा आणि चाचणी करा!
आम्ही पूर्ण केले! जेव्हा तुम्ही Translate
कॉम्पोनेंटमध्ये कोणतेही स्ट्रिंग्ज जोडता, तेव्हा तुमचे Next.js ऍप्लिकेशन आता आपोआप भाषांतरित होईल. लक्षात ठेवा की केवळ अशाच पर्यावरणात जेथे read/write
परवानग्या असलेल्या API की आहेत, तेथेच नवीन भाषांतरासाठी स्ट्रिंग्ज तयार करू शकतात. आम्ही तुम्हाला असा एक बंद आणि सुरक्षित स्टेजिंग वातावरण ठेवण्याचा सल्ला देतो जिथे तुम्ही अशी 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!