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: ಡೀಫಾಲ್ಟ್Fallback ಲೊಕೆಲ್ ಕೋಡ್. ಈ ಉದಾಹಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು ಅಂಗ್ಲ ಭಾಷೆಗೆ 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 ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಿದ ಎಲ್ಲಾ ಸ್ಥಳೀಯತೆ ಕೋಡ್‌ಗಳು ಪೂರ್ವ-ರೇಂಡರ್ ಆಗಿದ್ದುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತಿದೆ.

ಈಗ, ನಾವು ನಮ್ಮ ಮೊದಲ ಪೇಜ್ ಅನ್ನು ನಿರ್ಮಿಸೋಣ! /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 ಕೀ ಅನ್ನು ಬಳಸುತ್ತೇವೆ تاکہ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಭಾಷಾಂತರಕ್ಕಾಗಿ ಕಳುಹಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಾತರಿಪಡಿಸಲು.

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