Next.js अ‍ॅप्लिकेशनमध्ये जे App Router वापरत आहे, त्यात आंतरराष्ट्रीयीकरण कसे अंमलात आणावे

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

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

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

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

आपल्या Next.js अनुप्रयोगात आंतरराष्ट्रीयीकरण अंमलात आणण्यासाठी, आपण प्रथम एक 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 की कधीही लीक होऊ द्यू नका.

आम्ही आणखी दोन पर्यावरण चल सुद्धा वाढवणार आहोत: 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

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

क्लायंट एका वेगळ्या फाईलमध्ये तयार केल्याने नंतर पुन्हा वापर करणे सोपे होते. getLocales हा फक्त एक उपयुक्त फंक्शन आहे ज्यामध्ये काही अंतर्भूत त्रुटी हाताळणी आहे. आता, /app/[locale]/tacotranslate.tsx नावाची फाईल तयार करा, जिथे आम्ही TacoTranslate प्रदाता अंमलात आणणार आहोत.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

नोट करा 'use client'; दर्शवित आहे की हा एक क्लायंट कॉम्पोनंट आहे.

कॉन्टेक्स्ट प्रोव्हायडर आता तयार झाल्यानंतर, /app/[locale]/layout.tsx नावाचा एक फाइल तयार करा, जो आपल्या अ‍ॅप्लिकेशनमधील मूळ लेआउट असेल. लक्षात घ्या की या मार्गात Dynamic Routes चा वापर करणारा एक फोल्डर आहे, जिथे [locale] हा डायनॅमिक पॅरामीटर आहे.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

इथे पहिलं लक्षात घेण्यासारखं म्हणजे आपण आपल्या Dynamic Route पॅरामीटर [locale] चा वापर त्या भाषेच्या भाषांतरांसाठी करत आहोत. तसेच, generateStaticParams हे सुनिश्चित करत आहे की आपल्या प्रोजेक्टसाठी सक्रिय केलेल्या सर्व लोकल कोड्स पूर्व-रेंडर केलेले आहेत.

आता, आपण आपला पहिला पृष्ठ तयार करूया! /app/[locale]/page.tsx नावाचा एक फाइल तयार करा.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

नोट करा revalidate व्हेरिएबल ज्यामुळे Next.js ला 60 सेकंदानंतर पृष्ठ पुन्हा तयार करण्यास सांगितले जाते, आणि तुमच्या भाषांतरांना अद्ययावत ठेवते.

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

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

सर्व्हर साईड रेंडरिंग सेट करण्यासाठी, /next.config.js तयार करा किंवा बदल करा:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

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

राऊटिंग आणि रिडायरेक्शन अपेक्षित प्रमाणे काम करेल यासाठी, आपल्याला /middleware.ts नावाची एक फाईल तयार करणे आवश्यक आहे. Middleware वापरून, आम्ही वापरकर्त्यांना त्यांच्या पसंतीच्या भाषेत सादर झालेल्या पानांवर पुनर्निर्देशित करू शकतो.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

कृपया matcher हे Next.js Middleware documentation नुसार सेटअप करुन घ्या.

क्लायंटवर, तुम्ही locale कुकी बदलू शकता जेणेकरून वापरकर्त्याची प्राधान्य दिलेली भाषा बदलता येईल. कृपया पूर्ण उदाहरण कोड पाहा यासाठी कसे करायचे याबाबत कल्पना मिळवण्यासाठी!

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

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

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

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