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

ಜಗತ್ತು ಹೆಚ್ಚು ಜಾಗತೀಕರಿಸುತ್ತಿರುವಂತೆ, ವೆಬ್ ಡೆವಲಪರ್‌들에게 ವಿವಿಧ ದೇಶಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಹೆಚ್ಚಾಗಿ ಮಹತ್ವವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತಿದೆ. ಇದನ್ನು ಸಾಧಿಸುವ ಪ್ರಮುಖ ವಿಧಾನಗಳಲ್ಲಿ ಒಂದೆಂದರೆ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n), ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿಭಿನ್ನ ಭಾಷೆಗಳು, ಕರೆನ್ಸಿಗಳು ಮತ್ತು ದಿನಾಂಕ ಸ್ವರೂಪಗಳಿಗೆ ಹೊಂದಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಈ ಟ್ಯುಟೋರಿಯಲ್‌ನಲ್ಲಿ, ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್‌ ಸಹಿತ ನಿಮ್ಮ React Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣವನ್ನು ಹೇಗೆ ಸೇರಿಸಬೇಕು ಎಂಬುದನ್ನು ನಾವು ಪರಿಶೀಲಿಸಲಿದ್ದೇವೆ. TL;DR: ಇಲ್ಲಿ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ.

ಈ ಮಾರ್ಗದರ್ಶಿ Pages Router ಬಳಕೆ ಮಾಡುವ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ арналған.
ನೀವು App Router を ಬಳಸುತ್ತಿದ್ದರೆ, ದಯವಿಟ್ಟು ಬದಲಿಗೆ ಈ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನೋಡಿ.

ಹಂತ 1: i18n ಲೈಬ್ರರಿಯನ್ನು ಸ್ಥಾಪಿಸಿ

ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಅಂತಾರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n) ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸಲು, ಮೊದಲು ನಾವು ಒಂದು 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 ಫೈಲ್‌ಗೆ ಸೇರಿಸಬಹುದು.

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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

ನಾವು ಶೀಘ್ರದಲ್ಲೇ ಸ್ವಯಂಚಾಲಿತವಾಗಿ TACOTRANSLATE_API_KEY ಅನ್ನು ನಿರ್ಧರಿಸುವೆವು.

ಕ್ಲೈಂಟ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ರಚಿಸಿದರೆ ಅದನ್ನು ನಂತರ ಮತ್ತೆ ಬಳಸುವುದು ಸುಲಭವಾಗುತ್ತದೆ. ಈಗ, ಕಸ್ಟಮ್ /pages/_app.tsx ಅನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು TacoTranslate ಪ್ರೊವೈಡರ್ ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

ನೀವು ಈಗಾಗಲೇ ಕಸ್ಟಮ್ pageProps ಮತ್ತು _app.tsx ಹೊಂದಿದ್ದರೆ, ದಯವಿಟ್ಟು ಮೇಲ್ಕಂಡ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಕೋಡ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ವ್ಯಾಖ್ಯಾನವನ್ನು ವಿಸ್ತರಿಸಿ.

ಹಂತ 4: ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು

TacoTranslate ನಿಮ್ಮ ಅನುವಾದಗಳಿಗೆ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಇದರಿಂದ ಅನುವಾದಿತ ವಿಷಯವನ್ನು ತಕ್ಷಣವೇ ಪ್ರದರ್ಶಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರ ಅನುಭವವು ಸಾಕಷ್ಟು ಸುಧಾರಿಸುತ್ತದೆ — ಮೊದಲು ಅನುವಾದಿಸದ ವಿಷಯದ ಕ್ಷಣಿಕ ಪ್ರದರ್ಶನವಾಗುವುದರ ಬದಲು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬೇಕಾದ ಎಲ್ಲಾ ಅನುವಾದಗಳು ಈಗಾಗಲೇ ನಮ್ಮ ಬಳಿ ಇದ್ದು, ಆದ್ದರಿಂದ ಕ್ಲೈಯಂಟ್‌ನಲ್ಲಿ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು ಅವಶ್ಯಕತೆ ಉಳಿಯುವುದಿಲ್ಲ.

ನಾವು /next.config.js ಅನ್ನು ರಚಿಸುವ ಅಥವಾ ತಿದ್ದುಪಡಿ ಮಾಡುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸೋಣ.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

ನಿಮ್ಮ ಸಂರಚನೆಗೆ ಅನುಗುಣವಾಗಿ isProduction ಚೆಕ್ ಅನ್ನು ಬದಲಿಸಿ. ಯಾವಾಗ true ಆಗಿದ್ದರೆ, TacoTranslate ಸಾರ್ವಜನಿಕ API ಕೀಲಿಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ನಾವು ಸ್ಥಳೀಯ, ಪರೀಕ್ಷಾ ಅಥವಾ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರದಲ್ಲಿದ್ದರೆ (isProduction is false), ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಅನುವಾದಕ್ಕೆ ಕಳುಹಿಸಲಾಗುವಂತೆ ಖಚಿತಪಡಿಸಲು ರಹಸ್ಯ read/write API ಕೀಲಿಯನ್ನು ಬಳಸುವೆವು.

ಈವರೆಗೆ, ನಾವು Next.js ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬೆಂಬಲಿತ ಭಾಷೆಗಳ ಪಟ್ಟಿಯೊಂದಿಗೆ ಮಾತ್ರ ಸೆಟ್ ಮಾಡಿದ್ದೇವೆ. ಮುಂದೇ, ನಾವು ನಿಮ್ಮ ಎಲ್ಲಾ ಪುಟಗಳಿಗಾಗಿ ಅನುವಾದಗಳನ್ನು ಪಡೆಯುತ್ತೇವೆ. ಅದಕ್ಕಾಗಿ, ನಿಮ್ಮ ಅಗತ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ನೀವು getTacoTranslateStaticProps ಅಥವಾ getTacoTranslateServerSideProps ಅನ್ನು ಬಳಸುತ್ತೀರಿ.

ಈ ಫಂಕ್ಷನ್‌ಗಳು ಮೂರು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ: ಒಂದು Next.js Static Props Context ವಸ್ತು, TacoTranslate ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಮತ್ತು ಐಚ್ಛಿಕ Next.js ಗುಣಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ, getTacoTranslateStaticProps ನಲ್ಲಿ ಇರುವ revalidate ಡೀಫಾಲ್ಟ್‌ ಆಗಿ 60ಕ್ಕೆ ಸೆಟ್ ಮಾಡಲಾಗಿದೆ, ಅದರಿಂದ ನಿಮ್ಮ ಅನುವಾದಗಳು ನವೀನವಾಗಿರುತ್ತವೆ.

ಪುಟದಲ್ಲಿ ಈ ಯಾವುದಾದರೂ ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಲು, ನಿಮಗೆ /pages/hello-world.tsx ಹೀಗೆ ಒಂದು ಪುಟ ಫೈಲ್ ಇದೆಯೆಂದು ಊಹಿಸೋಣ.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

ನೀವು ಈಗ ನಿಮ್ಮ ಎಲ್ಲಾ React ಕಂಪೋನಂಟ್‌ಗಳಲ್ಲಿ ഉള്ള ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಿಸಲು Translate ಕಂಪೋನಂಟ್ ಅನ್ನು ಬಳಸಬಹುದು.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ಹಂತ 5: ಡಿಪ್ಲಾಯ್ ಮಾಡಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

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

ಖಚಿತವಾಗಿ ನಮ್ಮ GitHub ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿ ಇರುವ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ಪರಿಶೀಲಿಸಿ. ಅಲ್ಲಿ, ನೀವು App Router ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಹೇಗೆ ಮಾಡಲು ಎಂಬ ಉದಾಹರಣೆಯನ್ನೂ ಕಾಣುತ್ತೀರಿ! ಯಾವುದೇ ಸಮಸ್ಯೆ ಎದುರಾದರೆ, ಮುಕ್ತವಾಗಿ ಸಂಪರ್ಕಿಸಿ, ಮತ್ತು ನಾವು ಸಹಾಯ ಮಾಡಲು ಅತ್ಯಂತ ಸಂತೋಷವಾಗಿರುತ್ತೇವೆ.

TacoTranslate ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು 75ಕ್ಕಿಂತ ಹೆಚ್ಚು ಭಾಷೆಗಳಿಗೆ ಮತ್ತು ಅವುಗಳಿಂದ ತ್ವರಿತವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಥಳೀಯೀಕರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇಂದೇ ಪ್ರಾರಂಭಿಸಿ!