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!"/>;
}

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