Next.js ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗಾಗಿ ಅತ್ಯುತ್ತಮ ಅಂತಾರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n) ಪರಿಹಾರ

ಏಕೆ렇게 ಕೆಲಸ ಮಾಡುತ್ತದೆ

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

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

ಈ ಮಾರ್ಗದರ್ಶನವು Pages Router ಬಳಸದ ನಿಮ್ಮ Next.js ಅನ್ವಯಿಕೆಗಳಿಗೆ ಸಂಬಂಧಿಸಿದೆ.
ನೀವು App Router ಬಳಸುತ್ತಿದ್ದರೆ, ದಯವಿಟ್ಟು ಬದಲಾಗಿ ಈ ಮಾರ್ಗದರ್ಶನವನ್ನು ನೋಡಿ.

ಹಂತ 1: i18n ಗ್ರಂಥಾಲಯವನ್ನು ಸ್ಥಾಪಿಸಿ

ನಿಮ್ಮ Next.js ಅನ್ವಯಿಕೆಯಲ್ಲಿ ಅಂತರರಾಷ್ಟ್ರೀಯತೆಯನ್ನು (internationalization) ಜಾರಿಗೆ ತರುವುದಕ್ಕೆ ಮೊದಲಿಗೆ ನಾವು ಒಂದು 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: ಡೀಫಾಲ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಭಾಷಾ ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು English‌ಗೆ en ಎಂದು ನಿಶ್ಚಯಿಸುತ್ತೇವೆ.
• TACOTRANSLATE_ORIGIN: ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಸಂಗ್ರಹಿಸಲಾಗುವ "ಫೋಲ್ಡರ್", ಉದಾಹರಣೆಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ URL. ಇಲ್ಲಿ Origins ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಓದಿ.

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 ಗುಣಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ, 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!"/>
}

ಪದಚafari 5: ವಿನ್ಯಾಸ ಮಾಡಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

ನಾವು ಮುಗಿಸಿದೇವೆ! ನಿಮ್ಮ Next.js ಅನ್ವಯಿಕೆ ಈಗ ನೀವು ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು Translate_Component ಗೆ ಸೇರಿಸಿದಂತೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಭಾಷಾಂತರಗೊಳ್ಳುತ್ತದೆ. ಗಮನಿಸಿ, API ಕೀ ಮೇಲೆ read/write ಅನುಮತಿಗಳಿರುವ ಪರಿಸರಗಳಲ್ಲೇ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಭಾಷಾಂತರಗೊಳ್ಳಲು ಸೃಷ್ಟಿಸಬಹುದಾಗಿದೆ. ನಿಮ್ಮ ಉತ್ಪಾದನಾ ಅನ್ವಯಿಕೆಯನ್ನು ಅಂಶಿಸುವ ಮುನ್ನ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವಂತೆ ಈ ರೀತಿಯ API ಕೀ ಸಹಿತ ಮುಚ್ಚಲ್ಪಟ್ಟ ಮತ್ತು ಸುರಕ್ಷಿತ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರವನ್ನು ಹೊಂದುವುದನ್ನು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಇದು ಯಾರೂ ನಿಮ್ಮ ಗುಪ್ತ API ಕೀ ಅನ್ನು ಕದಡಲು ಸಾಧ್ಯವಾಗದಂತೆ ಮತ್ತು ಸಂಬಂಧಹೀನ ಹೊಸ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಿ ನಿಮ್ಮ ಭಾಷಾಂತರ ಯೋಜನೆಯನ್ನು ಅನಗತ್ಯವಾಗಿ ಭಾರವಾಗಿಸುವುದನ್ನು ತಡೆಗಟ್ಟುತ್ತದೆ.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!