Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಅಂತಾರಾಷ್ಟ್ರೀಯೀಕರಣ (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 ಕೀ ರಚಿಸಿ. ನಾವು ಅವುಗಳನ್ನು ಪರಿಸರ ಚರಗಳಾಗಿ (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 ಗುಣಲಕ್ಷಣಗಳು. ಗಮನಿಸಿ: 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!"/>;
}

ನೀವು τώρα? Wait. No. I'll produce Kannada. ನೀವು ಈಗ ನಿಮ್ಮ ಎಲ್ಲಾ React ಕಾಂಪೋನೆಂಟ್‌ಗಳ ಒಳಗಿನ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಿಸಲು Translate ಘಟಕವನ್ನು ಬಳಸಬಹುದು.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ಹಂತ 5: ಡಿಪ್ಲಾಯ್ ಮಾಡಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

ನಾವು ಮುಗಿಸಿದ್ದೇವೆ! ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್ ಈಗಿನಿಂದ, ನೀವು ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು Translate ಕಂಪೋನಂಟ್‌ಗೆ ಸೇರಿಸಿದಾಗ ಅವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಗೊಳ್ಳುತ್ತವೆ. ಗಮನಿಸಿ: 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!