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 ಕೀ ರಚಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳಾಗಿ ಉಳಿಸಿಕೊಳ್ಳುತ್ತೇವೆ. 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 ಗುಣಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ, revalidate ಅನ್ನು getTacoTranslateStaticProps ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್‌ನಂತೆ 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 ಕೀ ಬಳಸಿ ನಿಮ್ಮ ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಮುಚ್ಚಿದ ಮತ್ತು ಸುರಕ್ಷಿತವಾದ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರವನ್ನು ಇಟ್ಟುಕೊಳ್ಳಿ — ಇದು ಯಾರಾದರೂ ನಿಮ್ಮ ಗುಪ್ತ API ಕೀಯನ್ನು ಕದಿಯುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹೊಸ, ಸಂಬಂಧವಿಲ್ಲದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಅನವಶ್ಯಕವಾಗಿ ಭಾರಗೊಳಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

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

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