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

ನಿಮ್ಮ React ಅನ್ವಯಿಕೆಯನ್ನು ಇನ್ನಷ್ಟು қолುערסಬಲ್ ಆಗಿ ಮಾಡಿ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n) ಮೂಲಕ ಹೊಸ ಮಾರುಕಟ್ಟೆಗಳನ್ನು ತಲುಪಿರಿ.

ವಿಶ್ವವು ಹೆಚ್ಚುವರಿ ಜಾಗತಿಕವಾಗುತ್ತಿರುವಂತೆ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ವಿವಿಧ ದೇಶಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳ ಬಳಕೆದಾರರ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸಲು ಅನ್ವಯಿಸುತ್ತಿರುವ ಅನ್ವಯಿಕೆಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಹೆಚ್ಚಾಗಿ ಪ್ರಮುಖವಾಗುತ್ತಿದೆ. ಇದನ್ನು ಸಾಧಿಸುವ ಪ್ರಮುಖ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದು ಅಂತರರಾಜ್ಯೀಕರಣ (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 ಕೀ ರಚಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳಾಗಿ ಉಳಿಸುವೆವು. read ಕೀ ಅನ್ನು ನಾವು public ಎಂದು ಕರೆಯುತ್ತೇವೆ ಮತ್ತು read/write ಕೀ ಅನ್ನು secret ಎಂದು ಕರೆಯುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ರುಟ್ ನಲ್ಲಿ ಇರುವ .env ಕಡತದಲ್ಲಿ ಸೇರಿಸಬಹುದು.

.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. ಇಲ್ಲಿ ಉದ್ಭವಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಓದಿ.

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ಹಂತ 3: TacoTranslate ಸೆಟ್ ಅಪ್ ಮಾಡುವುದು

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ TacoTranslate ಅನ್ನು ಏಕೀಕರಿಸಲು, ಮೊದಲು ಇರುವ API ಕೀಯನ್ನು ಬಳಸಿ ಕ್ಲೈಂಟ್ ಅನ್ನು ರಚಿಸುವುದಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, /tacotranslate-client.js ಎಂಬ ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ.

/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 ಪ್ರೊವೈಡರ್ ಸೇರಿಸುವೆವು.

/pages/_app.tsx

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 ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ ಅಥವಾ ಬದಲಾಯಿಸುವ ಮೂಲಕ.

/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 ಗುಣಲಕ್ಷಣಗಳು. getTacoTranslateStaticProps上的 revalidate ಡೀಫಾಲ್ಟ್ ಆಗಿ 60 ರಿಂದ ಸೆಟ್ ಮಾಡಲಾಗಿದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಅನುವಾದಗಳು ನವೀಕೃತವಾಗಿರುತ್ತವೆ.

ಯಾವುದೇ ಕಾರ್ಯವನ್ನು ಪುಟದಲ್ಲಿ ಬಳಸಲು, ನೀವು /pages/hello-world.tsx ಎಂಬ ಪುಟ ಫೈಲ್ ಹೊಂದಿರುವುದಾಗಿ கருதೋಣ.

/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 ಕೀ ಅನ್ನು ಕಳ್ಳತನ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸಂಬಂಧಿತವಲ್ಲದ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅನುವಾದ ಯೋಜನೆಯನ್ನು ಹೆಚ್ಚಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.