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

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

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

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

ಈ ಮಾರ್ಗದರ್ಶಿ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ Pages Router ಅನ್ನು ಬಳಸುತ್ತಿರುವವರಿಗೆ ಉದ್ದೇಶಿಸಲಾಗಿದೆ.
ನೀವು 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 ಫೈಲಿಗೆ ಸೇರಿಸಬಹುದು.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ಗುಪ್ತ read/write API ಕೀಲಿಯನ್ನು ಕ್ಲೈಂಟ್‌ಸೈಡ್ ಉತ್ಪಾದನಾ ಪರಿಸರಗಳಿಗೆ ಎಂದಿಗೂ ಲೀಕ್ ಮಾಡಬಾರದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ನಾವು ಇನ್ನೂ ಎರಡು ಪರಿಸರ ಚರಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ: TACOTRANSLATE_DEFAULT_LOCALE ಮತ್ತು TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ಡೀಫಾಲ್ಟ್ (fallback) ಸ್ಥಳೀಯತೆ ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು ಇಂಗ್ಲಿಷ್‌ಗಾಗಿ 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!"/>;
}

ನೀವು ಈಗ ನಿಮ್ಮ ಎಲ್ಲಾ 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!