App Router ಬಳಸು್ತಿರುವ Next.js ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿನ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣವನ್ನು ಹೇಗೆ ಜಾರಿಗೊಳಿಸಬೇಕು

ಜಗತ್ತು ಹೆಚ್ಚು ಜಾಗತಿಕೀಕೃತವಾಗುತ್ತಿದ್ದಂತೆ, ವಿವಿಧ ದೇಶಗಳ ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಮಹತ್ವದ್ದಾಗುತ್ತದೆ. ಇದನ್ನು ಸಾಧಿಸುವ ಪ್ರಮುಖ ವಿಧಾನಗಳಲ್ಲಿ ಒಂದು ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ (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 ಕೀ ಸೃಷ್ಟಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳನ್ನು (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_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!" />
	);
}

Next.jsಗೆ ಪುಟವನ್ನು 60 ಸೆಕೆಂಡುಗಳ ನಂತರ ಮರುನಿರ್ಮಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅನುವಾದಗಳನ್ನು ಇತ್ತೀಚಿಗಾಗಿಸುವಂತೆ ಹೇಳುವ revalidate ಪರಿವರ್ತನೆಯನ್ನು ಗಮನಿಸಿ.

ಹಂತ 4: ಸರ್ವರ್ ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು

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 ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಅನುಸಾರವಾಗಿ ಹೊಂದಿಸಿ ಎಂದು ಖಾತ್ರಿಪಡಿಸಿ.

ಗ್ರಾಹಕಭಾಗದಲ್ಲಿ, ಬಳಕೆದಾರರ ಹಿರಿಯ ಭಾಷೆಯನ್ನು ಬದಲಾಯಿಸಲು ನೀವು locale ಕುಕಿಯನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಇದನ್ನು ಹೇಗೆ ಮಾಡಲು ಎಂದು ಇಚ್ಛಿಸಿದರೆ ದಯವಿಟ್ಟು ಪೂರ್ಣ ಉದಾಹರಣೆ ಕೋಡ್ ನೋಡಿ!

ಹಂತ 5: ನಿಯೋಜಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

ನಾವು ಮುಗಿಸಿಕೊಂಡಿದ್ದೇವೆ! ನೀವು ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು Translate ಘಟಕಕ್ಕೆ ಸೇರಿಸಿದಾಗ ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಷನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಗೊಳ್ಳುತ್ತದೆ. API ಕೀಲಿಗೆ read/write ಅನುಮತಿಗಳು ಇರುವ ಪರಿಸರಗಳಲ್ಲಿ ಮಾತ್ರ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಕ್ಕೆ ಸೃಷ್ಟಿಸಬಹುದಾದುದಾಗಿ ಗಮನಿಸಿ. ನಾವು ಮುಚ್ಚಿಟ್ಟ ಹಾಗೂ ಸುರಕ್ಷಿತ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರ ಹೊಂದಿರುವುದನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ, ಅಲ್ಲಿ ನೀವುprodução ಅಪ್ಲಿಕೇಷನ್ ಅನ್ನು API ಕೀಲಿಯೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಲೈವ್‌ಗೆ ಹೋಗುವ ಮೊದಲು ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಇದು ಯಾರಾದರೂ ನಿಮ್ಮ ರಹಸ್ಯ API ಕೀಲಿಯನ್ನು ಕದಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಅನಾವಶ್ಯಕ, ಸಂಬಂಧವಿಲ್ಲದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಮೆರಗು ಮಾಡದಂತೆ ಮಾಡುತ್ತದೆ.

ಖಚಿತವಾಗಿ ನಮ್ಮ GitHub ಪ್ರೊಫೈಲ್ ನಲ್ಲಿ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ಪರಿಶೀಲಿಸಿ. ಅಲ್ಲಿ, ನೀವು Pages Router ಬಳಸಿ ಇದನ್ನು ಹೇಗೆ ಮಾಡುವುದು ಎಂಬುದರ ಉದಾಹರಣೆಯನ್ನು ಕೂಡ ಕಾಣಬಹುದು! ನೀವು ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಿದರೆ, ದಯವಿಟ್ಟು ಸಂಪರ್ಕಿಸಿ, ಮತ್ತು ನಾವು ಸಹಾಯ ಮಾಡಲು ತುಂಬ ಖುಷಿಯಾಗಿದ್ದೇವೆ.

TacoTranslate ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಯಾವ ಭಾಷೆಗೆ ಬೇಕಾದರೂ ಶೀಘ್ರವಾಗಿ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಥಳೀಯೀಕರಣ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇಂದು ಆರಂಭಿಸಿ!