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

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

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

ಈ ಮಾರ್ಗದರ್ಶಿ Pages Router ಅನ್ನು ಬಳಸುವ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ.
ನೀವು App 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 ಫೈಲ್‌ಗೆ ಸೇರಿಸಬಹುದು.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ತಪ್ಪದೇ ಗುಪ್ತ read/write API ಕೀ ಅನ್ನು ಕ್ಲೈಂಟ್‌ಸೈಡ್ ಉತ್ಪಾದನಾ ಪರಿಸರಗಳಿಗೆ ಎಂದಿಗೂ ಬಹಿರಂಗಪಡಿಸಬೇಡಿ.

ನಾವು ಇನ್ನೂ ಎರಡು ಪರಿಸರ ಚರಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ: TACOTRANSLATE_DEFAULT_LOCALE ಮತ್ತು TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ಡೀಫಾಲ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಲೋಕೇಲ್ ಕೋഡ്. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು ಇಂಗ್ಲಿಷ್‌ಗೆ en ಎಂದು ಹೊಂದಿಸುತ್ತೇವೆ.
• TACOTRANSLATE_ORIGIN: ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಸಂಗ್ರಹವಾಗುವ “folder”, ಉದಾಹರಣೆಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ 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: ಡಿಪ್ಲಾಯ್ ಮಾಡಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

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

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

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