TacoTranslate
/
ಡಾಕ್ಯುಮೆಂಟ್ಮೌಲ್ಯನಿರ್ಣಯ
 
ಪಾಠ
ಮೇ 04

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

ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಇನ್ನಷ್ಟು ಪ್ರಾಪ್ಯವಾಗಿಸಿ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n) ಮೂಲಕ ಹೊಸ ಮಾರುಕಟ್ಟೆಗಳನ್ನು ತಲುಪಿಸಿ.

ವಿಶ್ವವು ಹೆಚ್ಚು ಅಂತಾರಾಷ್ಟ್ರೀಯವಾಗುತ್ತಿರೋಂತೆ, ವಿಭಿನ್ನ ದೇಶಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಿಂದ ಬಳಕೆದಾರರನ್ನು ಒಪ್ಪಿಕೊಳ್ಳುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವೆಬ್ ಡೆವೆಲಪರ್‌ಗಳು ನಿರ್ಮಿಸುವುದು ಪ್ರಮುಖವಾಗುತ್ತಿದೆ. ಇದನ್ನು ಸಾಧಿಸುವ ಪ್ರಮುಖ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಅಂತಾರಾಷ್ಟ್ರೀಯೀಕರಣ (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 ಒಳಗಿನ Projects ರಚಿಸಿ ಮತ್ತು ಅದರ API keys ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ. ಒಂದು read ಕೀ ಮತ್ತು ಒಂದು read/write ಕೀ ರಚಿಸಿ. ಅವುಗಳನ್ನು ನಮಿಷಲು ಪರಿಸರ ಚರಗಳನ್ನು (environment variables) ಆಗಿ ಉಳಿಸುವೆವು. read ಕೀ ಅನ್ನು ನಾವು public ಎಂದು ಕರೆಯುತ್ತೇವೆ ಮತ್ತು read/write ಕೀ ಅನ್ನು secret ಎಂದು ಕರೆಯುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಯೋಜನೆಯ ಮೂಲದಲ್ಲಿ ಇರುವ .env ಫೈಲ್ ಗೆ ಸೇರಿಸಬಹುದು.

.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: ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗಗಳು ಸಂಗ್ರಹವಾಗುವ "ಫೋಲ್ಡರ್", ಉದಾಹರಣೆಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಯುಆರ್‌ಎಲ್. ಇಲ್ಲಿ ಮೂಲಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಓದಿ.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ಹಂತ 3: 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.

/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 ಪ್ರೊವೈಡರ್ ಅನ್ನು ರಚಿಸಬಹುದು.

/app/[locale]/tacotranslate.tsx
'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] ಡೈನಾಮಿಕ್ ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿದೆ.

/app/[locale]/layout.tsx
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 ಎಂಬ ಫೈಲ್ ಅನ್ನು ಸೃಷ್ಠಿಸಿ.

/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 ಅನ್ನು ರಚಿಸಿ ಅಥವಾ ತಿದ್ದುಪಡಿ ಮಾಡಿ:

/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 ಕೀ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ನಿಗದಿತವಾಗಿ ಮಾರ್ಗನಿರ್ದೇಶನ ಮತ್ತು ಪುನಃದ[state]ರಣ ಕಾರ್ಯನಿಭಾವಿಸುವುದನ್ನು ಖಚಿತಗೊಳಿಸಲು, ನಾವು /middleware.ts ಎನ್ನುವ файл ಅನ್ನು ರಚಿಸಬೇಕಾಗುತ್ತದೆ. Middleware ಬಳಸಿ, ನಾವು ಬಳಕೆದಾರರನ್ನು ಅವರ ಇಚ್ಛಿಸಬಹುದಾದ ಭಾಷೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗಿರುವ ಪುಟಗಳಿಗೆ ಪುನಃನಿರ್ದೇಶನ ಮಾಡಬಹುದು.

/middleware.ts
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 ಅನುಮತಿಗಳು ಇರುವ ಪರಿಸರಗಳು ಮಾತ್ರ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಕ್ಕೆ ಸೃಷ್ಟಿಸಬಹುದು ಎಂದು ಗಮನಿಸಬೇಕು. ನಾವು ಷಟಗೋಳಿತ ಮತ್ತು ಭದ್ರಿತ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರವನ್ನು ಹೊಂದಿರುವುದನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ, ಅಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು API ಕೀ ಬಳಸಿಕೊಂಡು ಪರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಲೈವ್ ಆಗುವುದಕ್ಕೂ ಮುನ್ನ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಇದರಿಂದ ಯಾರಾದರೂ ನಿಮ್ಮ ರಹಸ್ಯ API ಕೀ ಅನ್ನು ಕಳವು ಮಾಡುವುದು ಹಾಗೂ ಅನುರೂಪವಿಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಅನವಶ್ಯಕವಾಗಿ ಬೃಹತ್ ಮಾಡುವುದು ನಿಲ್ಲಿಸಬಹುದು.

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

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

Nattskiftet ರೊಂದಾಗಿ ಉತ್ಪನ್ನ