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

ಈಗ, ನಮ್ಮ ಮೊದಲ ಪುಟವನ್ನು ನಿರ್ಮಿಸೋಣ! /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 Middleware documentation ಅನುಸಾರವಾಗಿ ಹೊಂದಿಸಿ.

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

ಹಂತ 5: ಅಳವಡಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

ನಾವು ಮುಗಿಸಿದ್ದೇವೆ! ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೀವು ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು Translate ಕಂಪೋನಂಟ್‌ಗೆ ಸೇರಿಸಿದಾಗ ಈಗ ಅವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದವಾಗುತ್ತವೆ. API ಕೀ上 read/write ಅನುಮतಿಗಳು ಇರುವ ಪರಿಸರಗಳಲ್ಲಿ ಮಾತ್ರ ಅನುವಾದಕ್ಕೆ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಅಂತಹ API ಕೀ ಬಳಸಿ ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಲೈವ್‌ಗೆ ಹೋಗುವ ಮುನ್ನ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಲು, ಒಂದು ಮುಚ್ಚಿದ ಮತ್ತು ಸುರಕ್ಷಿತ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರವನ್ನು ಹೊಂದಿರುವುದನ್ನು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಇದರಿಂದ ಯಾರಾದರೂ ಯಾರಾದರೂ ನಿಮ್ಮ ರಹಸ್ಯ API ಕಿಯನ್ನು ಕದ್ದುಕೊಳ್ಳುವುದನ್ನು ತಡೆಯಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಸಂಬಂಧವಿಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಅನಗತ್ಯವಾಗಿ ಹೆಚ್ಚಿಸುವ ಸಾಧ್ಯತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.