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

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

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

ಈ ಮಾರ್ಗಸೂಚಿ Pages Router ಬಳಸುತ್ತಿರುವ Next.js ಅನ್ವಯಗಳಿಗಾಗಿ ಆಯಿತು.
ನೀವು App Router ಬಳಸುತ್ತಿದ್ದರೆ, ದಯವಿಟ್ಟು ಬದಲು ಈ ಮಾರ್ಗಸೂಚಿಯನ್ನು ನೋಡಿ.

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

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

ಈ ಕಾರ್ಯಗಳು ಮೂರು Arguments ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ: ಒಂದು 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 ಕಂಪೋನೆಂಟ್‌ಗೆ ಸೇರಿಸಿದಾಗ ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಿಸಲಾಗುತ್ತದೆ. API ಕೀ ಯಿ ಮೇಲೆ read/write ಅನುಮತಿಗಳಿದ್ದ ಪರಿಸರಗಳಲ್ಲಿ ಮಾತ್ರ ಹೊಸ ಅನುವಾದಿಸಬೇಕಾದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಲೈವ್ ಆಗುವ ಮೊದಲು ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಿ ನಿಮ್ಮ ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಟೆಸ್ ಮಾಡಿ ನೋಡಬಹುದಾದ ಮುಚ್ಚಲ್ಪಟ್ಟ ಮತ್ತು ಸುರಕ್ಷಿತ ಸ್ಥಿತಿ ಪರಿಸರವನ್ನು ಹೊಂದಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಇದರಿಂದ ಯಾರೇನೂ ನಿಮ್ಮ ರಹಸ್ಯ API ಕೀಯನ್ನು ಕಸೂತಿ ಮಾಡುವುದು ತಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಸಂಪರ್ಕವಿಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಅಗಾಧವಾಗಿಸುವ ಸಾಧ್ಯತೆಯೂ ಕಡಿಮೆಯಾಗುತ್ತದೆ.

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

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