Pages Router ಬಳಸುತ್ತಿರುವ Next.js ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಅಂತರರಾಷ್ಟ್ರೀಯೀಕರಣವನ್ನು ಹೇಗೆ ಜಾರಿಗೆ ತರುವುದೆಂದು

ಪ್ರಪಂಚ越来越 ಜಾಗತಿಕವಾಯಿತಾಗುತ್ತಿರ<br><br><strong>ಈ ಟ್ಯುಟೋರಿಯಲ್‌ನಲ್ಲಿ, ನಾವು ನಿಮ್ಮ React Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಅಂತಾರಾಷ್ಟ್ರೀಯೀಕರಣವನ್ನು ಹೇಗೆ ಸೇರಿಸಲು ಆಗುತ್ತದೆ ಎಂಬುದನ್ನು ಮತ್ತು ಸರ್ವರ್ سائಡ್ ರೆಂಡರಿಂಗ್ ಸಹಿತ ಪರಿಶೀಲಿಸುತ್ತೇವೆ.</strong> <a href="https://github.com/tacotranslate/js-package/tree/master/examples">TL;DR: ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ಇಲ್ಲಿ ನೋಡಿ.</a>

ಈ ಮಾರ್ಗದರ್ಶಿಕೆ Pages Router ಅನ್ನು ಬಳಸುತ್ತಿರುವ Next.js ಅನ್ವಯಿಕೆಗಳಿಗೆ арналғанది.
ನೀವು App Router ಬಳಸುತ್ತಿದ್ದರೆ, ದಯವಿಟ್ಟು ಬದಲಿಗೆ ಈ ಮಾರ್ಗದರ್ಶಿಕೆಯನ್ನು ನೋಡಿ.

ಹೆಜ್ಜೆ 1: i18n ಲೈಬ್ರರಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ

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

TacoTranslate ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು любಟುದಾರ್ತಿ AI ಉಪಯೋಗಿಸುವ ಮೂಲಕ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಯಾವುದೇ ಭಾಷೆಗೆ ಭಾಷಾಂತರಿಸುತ್ತದೆ ಮತ್ತು JSON ಕಡತಗಳ ಕಷ್ಟದ ನಿರ್ವಹಣೆಯಿಂದ youನಿಮ್ಮನ್ನು ಮುಕ್ತಗೊಳಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಟರ್ಮಿನಲ್ ನಲ್ಲಿ 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: ಡೀಫಾಲ್ಟ್Fallback locale ಕೋಡ್. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಇದನ್ನು ಇಂಗ್ಲಿಷ್‌ಗಾಗಿ en ಆಗಿ ಸೆಟ್ ಮಾಡುತ್ತೇವೆ.
• TACOTRANSLATE_ORIGIN: ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಸಂಗ್ರಹವಾಗುವ “ಫೋಲ್ಡರ್”, ಉದಾಹರಣೆಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟಿನ URL. ಮೂಲಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಇಲ್ಲಿ ಓದಿರಿ.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ಹಂತ 3: TacoTranslate ಅನ್ನು ಸೆಟ್‌ಅಪ್ ಮಾಡುವುದು

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ವಸ್ತು, ಟ್ಯಾಕೊಟ್ರಾನ್ಸ್ಲೇಟ್ಗಾಗಿ ಸಂರಚನೆ, ಮತ್ತು ಐಚ್ಛಿಕ 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: ನಿಯೋಜಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ!

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

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

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