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

ನಿಮ್ಮ 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 ಒಳಗೆ, ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ ಮತ್ತು ಅದರ 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'; ಅನ್ನು ಗಮನಿಸಿ.

ಕಂಟೆಕ್ಸ್ಟ್ ಪ್ರೊವೈಡರ್ ಈಗ ಸಿದ್ಧವಾಗಿರುವುದರಿಂದ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್ ಲೇಔಟ್ ಆಗಿರುವ /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 ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಿದ ಎಲ್ಲಾ locale ಕೋಡ್‌ಗಳು ಪೂರ್ವ-ರೆಂಡರ್ ಆಗುವಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಈಗ, ನಮ್ಮ ಮೊದಲ ಪುಟವನ್ನು ನಿರ್ಮಿಸೋಣ! /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!" />
	);
}

60 ಸೆಕೆಂಡುಗಳ ನಂತರ ಪುಟವನ್ನು ಮರು-ನಿರ್ಮಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅನುವಾದಗಳನ್ನು ನವೀನವಾಗಿಡಲು Next.js ಗೆ ಸೂಚಿಸುವ 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 ಕೀ ಅನ್ನು ನಾವು ಬಳಸುತ್ತೇವೆ.

ರೌಟಿಂಗ್ ಮತ್ತು ಮರುನಿರ್ದೇಶನ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕಾದರೆ, ನಾವು /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 ಕೀ ಅನ್ನು ಕಳ್ಳತೆಗೆ ಒಳಪಡಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸಂಬಂಧವಿಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಪ್ರಾಜೆಕ್ಟ್‌ ಅನ್ನು ಅಗತ್ಯವಲ್ಲದೇ ದೊಡ್ಡದಾಗಿಸುವ ಸಾಧ್ಯತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.