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

ಜಾಗತೀಕರಣ ಹೆಚ್ಚುತ್ತಿರುವಂತೆ, ವಿಭಿನ್ನ ದೇಶಗಳ ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೊಂದಿಕೊಳ್ಳಲು ವೆಬ್ ಅಭಿವೃದ್ಧಿಕಾರರು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಮಹತ್ವವುಳ್ಳದ್ದಾಗಿದೆ. ಇದನ್ನು ಸಾಧಿಸಲು ಪ್ರಮುಖ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಅಂತಾರಾಷ್ಟ್ರೀಯತೆ (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 ಬಳಸಬಹುದು.

ಈ ಕಾರ್ಯಗಳು ಮೂರು 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 ಕೀ ಮೂಲಕ ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಅನ್ವಯವನ್ನು ಪರೀಕ್ಷಿಸಿ, ಲೈವ್ ಆಗುವ ಮೊದಲು ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಇದು ಯಾರಾದರು ನಿಮ್ಮ ಗುಪ್ತ API ಕೀ ಅನ್ನು ಕದಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಅನುರೂಪವಿಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಿ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಅಗತ್ಯವಿಲ್ಲದೆ ತುಂಬಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

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

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