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 ಕೀ ರಚಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳಾಗಿ (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 ಗುಣಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ: 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 ಕ್ಕಿಂತ ಹೆಚ್ಚು ಭಾಷೆಗಳಿಗೆ ಹಾಗೂ ಅವುಗಳಿಂದ ತ್ವರಿತವಾಗಿ ಸ್ಥಳೀಯೀಕರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇಂದುಲೇ ಪ್ರಾರಂಭಿಸಿ!