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 keyಗಳ ಟ್ಯಾಬ್ಗೆ ಹೋಗಿ. ಒಂದು read
ಕೀ ಮತ್ತು ಒಂದು read/write
ಕೀ ಸೃಷ್ಟಿಸಿ. ಅವುಗಳನ್ನು ನಾವು ಪರಿಸರ ವ್ಯತ್ಯಾಸಗಳಾಗಿ ಉಳಿಸುವೆವು. read
ಕೀ ಅನ್ನು ನಾವು public
ಎಂದು ಕರೆಯುತ್ತೇವೆ ಮತ್ತು read/write
ಕೀ ಅನ್ನು secret
ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಅವುಗಳನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ರೂಟ್ನಲ್ಲಿ ಇರುವ .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. ಇಲ್ಲಿ ಮಾಲುಗುಟುಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಓದಿ.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ಹಂತ 3: TacoTranslate ಅನ್ನು ಹೊಂದಿಸುವುದು
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ TacoTranslate ಅನ್ನು ಸಂಪರ್ಕಿಸಲು, ನೀವು ಮೊದಲಿನಿಂದಲಿದ್ದ API ಕೀಗಳ ಬಳಸಿ ಕ್ಲೈಂಟ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, /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
ಪೂರೈಕೆದಾರನನ್ನು ಅನುಷ್ಟಾನ ಮಾಡಲಿದ್ದೇವೆ.
'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]
动态 ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿದೆ.
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
ಎಂಬ ಫೈಲ್ ರಚಿಸಿ.
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
ಅನ್ನು ರಚಿಸಿ ಅಥವಾ ತಿದ್ದುಪಡಿಮಾಡಿ:
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 ಬಳಸಿ, ನಾವು ಬಳಕೆದಾರರನ್ನು ಅವರ ಇಷ್ಟದ ಭಾಷೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುವ ಪುಟಗಳಿಗೆ ರೀಡೈರೆಕ್ಟ್ ಮಾಡಬಹುದು.
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!