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

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

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

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

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

ಹಂತ 1: i18n ಲೈಬ್ರರಿ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ

ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣ (i18n) ಜಾರಿಗೆ ತರುವುದಕ್ಕಾಗಿ, ಮೊದಲು ನಾವು ಒಂದು i18n ಲೈಬ್ರರಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ. ಕೆಲವು ಜನಪ್ರಿಯ ಲೈಬ್ರರಿಗಳು ಲಭ್ಯವಿವೆ, ಉದಾಹರಣೆಗೆ next-intl. ಆದರೆ, ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು TacoTranslate ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

TacoTranslate ಅತ್ಯಾಧುನಿಕ AI ಬಳಸಿ ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಯಾವುದೇ ಭಾಷೆಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಿಸುತ್ತದೆ ಮತ್ತು JSON ಫೈಲ್‌ಗಳ ಬೇಸರಗೊಳಿಸುವ ನಿರ್ವಹಣೆಯಿಂದ ನಿಮ್ಮನ್ನು ಮುಕ್ತಗೊಳಿಸುತ್ತದೆ.

ಇದನ್ನು ನಿಮ್ಮ ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ npm ಬಳಸಿ ಸ್ಥಾಪಿಸೋಣ:

npm install tacotranslate

ಹಂತ 2: ಉಚಿತ TacoTranslate ಖಾತೆಯನ್ನು ರಚಿಸಿ

ನೀವು ಈಗ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿರುವುದರಿಂದ, ನಿಮ್ಮ TacoTranslate ಖಾತೆ, ಒಂದು ಅನುವಾದ ಪ್ರೊಜೆಕ್ಟ್ ಮತ್ತು ಸಂಬಂಧಿತ API ಕೀಲಿಗಳನ್ನು ರಚಿಸುವ ಸಮಯವಾಗಿದೆ. ಇಲ್ಲಿ ಖಾತೆ ರಚಿಸಿ. ಇದು ಉಚಿತವಾಗಿದೆ ಮತ್ತು ಕ್ರೆಡಿಟ್ ಕಾರ್ಡ್ ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

TacoTranslate ಅಪ್ಲಿಕೇಶನ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ನಲ್ಲಿ ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸೃಜಿಸಿ ಮತ್ತು ಅದರ 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: ಡೀಫಾಲ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಲೋಕೇಲ್ ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು 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: ಅಳವಡಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

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