Pages Router ಬಳಸಿ Next.js ಅನ್ವಯಿಕೆಯಲ್ಲಿ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣವನ್ನು ಹೇಗೆ ಜಾರಿ ಮಾಡುವುದು

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

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

ಈ ಮಾರ್ಗದರ್ಶಿಕೆ Next.js ಕೋಶಗಳು ಬಳಸುತ್ತಿರುವ Pages Router ಗಳಿಗಾಗಿ.
ನೀವು 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 ಕೀ ರಚಿಸಿ. ಅವನ್ನು ನಾವು ಪರಿಸರ ಚರ ಸ್ಥೂಲಗಳಾಗಿ (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: ಡೀಫಾಲ್ಟ್Fallback ಸ್ಥಳೀಯ ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಅದನ್ನು 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 ಅನ್ನು ಬಳಕೆಮಾಡಬೇಕಾಗಿದೆ.

ಈ ಕಾರ್ಯಗಳು ಮೂರು ಪರಾಮETERSಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ: ಒಂದು Next.js Static Props Context ವಸ್ತು, TacoTranslate ಗಾಗಿ ಸಂರಚನೆ, ಮತ್ತು ঐচ্ছಿಕ Next.js ಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ, getTacoTranslateStaticProps ಮೇಲಿನ revalidate ಅನ್ನು ಡೀಫಾಲ್ಟ್‌modoದಲ್ಲಿ 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 ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಯಾವುದೇ ಭಾಷೆಗೆ ಹಾಗೂ ಭಾಷೆಯಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಥಳಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಇಂದು ಆರಂಭಿಸಿ!