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

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

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

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

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

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

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

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

npm install tacotranslate

पायरी 2: एक फ्री TacoTranslate खाते तयार करा

आता जेव्हा तुम्ही मॉड्यूल इंस्टॉल केलं आहे, तेव्हा तुमचं TacoTranslate अकाउंट, एक भाषांतर प्रोजेक्ट आणि संबंधित API की तयार करण्याची वेळ आली आहे. इथे एक अकाउंट तयार करा. हे मोफत आहे, आणि तुम्हाला क्रेडिट कार्ड जोडण्याची आवश्यकता नाही.

TacoTranslate ॲप्लिकेशन UI मध्ये, एक प्रोजेक्ट तयार करा आणि त्याच्या API कीज टॅबवर जा. एक 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 सेटअप करणे

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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असेल तर टॅकोट्रान्सलेट सार्वजनिक एपीआय की पृष्ठभागावर येईल. जर आम्ही स्थानिक, चाचणी किंवा स्टेजिंग वातावरणात असू (isProduction is false), आम्ही अनुवादासाठी नवीन स्ट्रिंग पाठविले आहेत याची खात्री करण्यासाठी गुप्त read/write एपीआय की वापरू.

राऊटिंग आणि रीडायरेक्शन अपेक्षेनुसार कार्यान्वित होण्यासाठी, आपल्याला /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 दस्तऐवजीकरण नुसार सेटअप केले आहे.

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

पद ५: तैनात करा आणि परीक्षण करा!

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

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

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