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 ಲೈಬ್ರರಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡಬೇಕು.Several ಜನಪ್ರಿಯ ಲೈಬ್ರರಿಗಳು ಲಭ್ಯವಿದ್ದು, ಅವುಗಳಲ್ಲಿ 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 ಫೈಲ್‌ಗೆ ಸೇರಿಸಬಹುದು.

.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. ಮೂಲಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಇಲ್ಲಿ ಓದಿರಿ.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ಹಂತ 3: TacoTranslate ಅನ್ನು ಸಂರಚಿಸುವುದು

TacoTranslate ಅನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು, ನೀವು ಹಿಂದೆ ನೀಡಲಾದ API ಕೀಲಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದು ಕ್ಲೈಂಟ್ ರಚಿಸಬೇಕಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, /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'; ಅನ್ನು ಗಮನಿಸಿ.

context ಪ್ರೊವೈಡರ್ ಈಗ ಸಿದ್ಧವಾಗಿರುವುದರಿಂದ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲ ಲೇಔಟ್ ಆಗಿರುವ /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!" />
	);
}

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

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

Routing ಮತ್ತು ಪುನರ್‌ನಿರ್ದೇಶನ ನಿರೀಕ್ಷಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಾವು /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 ಮಿಡ್‌ಲ್‌ವೇರ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ಗೆ ಅನುಗುಣವಾಗಿ ಸೆಟ್ ಅಪ್ ಮಾಡಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

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

ಹಂತ 5: ಡಿಪ್ಲಾಯ್ ಮಾಡಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

ಮುಗಿದಿದೆ! ನೀವು ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು Translate ಕಂಪೋನಂಟ್‌ಗೆ ಸೇರಿಸಿದಾಗ, ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ ಈಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದವಾಗುತ್ತದೆ. API ಕೀ ಮೇಲೆ read/write ಅನುಮತಿಗಳಿರುವ ಪರಿಸರಗಳಲ್ಲೇ ಅನುವಾದಕ್ಕೆ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಿರುತ್ತದೆ ಎಂದು ಗಮನಿಸಿ. ಲೈವ್ ಆಗುವುದಕ್ಕೆ ಮುನ್ನ ಅಂಥ 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 Pages 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!

Nattskiftet ನಿಂದ ಒಂದು ಉತ್ಪನ್ನನಾರ್ವೆಯಲ್ಲಿ ತಯಾರಿಸಲಾಗಿದೆ