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 ಕೀ ರಚಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳಾಗಿ (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: ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ “ಫೋಲ್ಡರ್”, ಉದಾಹರಣೆಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ 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!" />
	);
}

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

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