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 ಖಾತೆಯನ್ನು ರಚಿಸಿ

ಈಗ ನೀವು ಮೋ듲ಲ್ εγκαжет ಸಾಗಿಸಿ (installed) ಮಾಡಿದ್ದೀರಿ, ನಿಮಗೆ ನಿಮ್ಮ 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: ಡೀಫಾಲ್ಟ್ ಫಾಲ್ಬ್ಯಾಕ್ ಲೋಕೇಲ್ ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು ಇಂಗ್ಲಿಷ್‌ಗಾಗಿ 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 ಕೀ ಹೊಂದಿರುವuclosed ಮತ್ತು ಸುರಕ್ಷಿತ ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರವನ್ನು ಹೊಂದಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ, ಅಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಹೊಸ ಸ್ಟ್ರಿಂಗ್ಸ್ ಅನ್ನು ಸೇರಿಸಬಹುದು. ಇದು ಯಾರಿಗಾದರೂ ನಿಮ್ಮ ಗುಪ್ತ 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!