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 ಅಪ್ಲಿಕೇಶನ್ 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-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!"/>;
}

ನೀವು ಈಗ Translate ಘಟಕವನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಎಲ್ಲಾ React ಘಟಕಗಳ ಒಳಗಿನ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಿಸುವ ಸಾಮರ್ಥ್ಯ ಹೊಂದಿರಬೇಕು.

import {Translate} from 'tacotranslate/react';

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

ಹಂತ 5: ನಿಯೋಜಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

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

ಖಚಿತವಾಗಿ ನಮ našeGitHub ಪ್ರೊಫೈಲಿನಲ್ಲಿ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ. ಅಲ್ಲಿ, ನೀವು App Router ಉಪಯೋಗಿಸಿ ಇದನ್ನು ಮಾಡುವುದು ಹೇಗೆ ಎಂಬ ಉದಾಹರಣೆಯನ್ನು ಸಹ ಕಾಣಬಹುದು! ನೀವು ಯಾವುದೇ ಸಮಸ್ಯೆ ಎದುರಿಸಿದರೆ, ದಯವಿಟ್ಟು ನಮ್ಮನ್ನು ಸಂಪರ್ಕಿಸಿ, ನಾವು ಸಹಾಯ ಮಾಡಲು ಬಹಳ ಸಂತೋಷವಾಗುತ್ತೇವೆ.

TacoTranslate ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಯಾವುದೇ ಭಾಷೆಗೆ ಅಥವಾ ಯಾವುದೇ ಭಾಷೆಯಿಂದ ತ್ವರಿತವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಥಳೀಯಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇಂದು ಪ್ರಾರಂಭಿಸಿ!