Pages Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനിൽ അന്താരാഷ്ട്രവൽക്കരണം എങ്ങനെ നടപ്പിലാക്കാം Pages Router

ലോകം കൂടുതൽ ആഗോളമാകുന്നതിനാൽ, വ്യത്യസ്ത രാജ്യങ്ങൾക്കും നിലപാടുകൾക്കുമനുസരിച്ച് ഉപയോക്താക്കളെ സേവിക്കാൻ കഴിയുന്ന ആപ്ലിക്കേഷനുകൾ വെബ് ഡവലപ്പർമാർ നിർമ്മിക്കുന്നത് കൂടുതൽ പ്രധാനപ്പെട്ടതാകുന്നു. ഇതിന്‍റെ പ്രധാന മാർഗങ്ങളിൽ ഒന്നാണ് അന്താരാഷ്ട്രവൽക്കരണം (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 കീയും ഉണ്ടാക്കുക. ഞങ്ങൾ അവയെ പരിസ്ഥിതി വേരിയബിളുകളായി സംരക്ഷിക്കും. 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 പ്രോപ്പർട്ടികൾ. ശ്രദ്ധിക്കുക: revalidate getTacoTranslateStaticProps‑ൽ ഡീഫോൾട്ടായി 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: ഡിപ്ലോയ് ചെയ്ത് പരിശോധിക്കുക!

ഞങ്ങൾ പൂർത്തിയായി! നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ ഇനി മുതൽ Translate കംപോണന്റിലേക്ക് നിങ്ങള്‍ ഏതെങ്കിലും സ്ട്രിംഗ്(കൾ) ചേർക്കുമ്പോൾ ഓട്ടോമാറ്റിക്കായി തർജ്ജമിക്കപ്പെടും. ശ്രദ്ധിക്കുക: API കീയിൽ read/write അനുമതികൾ ഉള്ള പരിസ്ഥിതികളിൽ മാത്രമേ പുതിയ തർജ്ജമിക്കാനുള്ള സ്ട്രിംഗ്(കൾ) സൃഷ്ടിക്കാവൂ. ലൈവിലേക്ക് പോകുന്നതിന് മുമ്പ് പുതിയ സ്ട്രിങ്ങുകൾ那里 ചേർക്കുന്നതിനും, ആ രീതിയിലുള്ള API കീ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷൻ അവിടെ പരീക്ഷിക്കാൻ കഴിയുന്ന അടച്ചും സുരക്ഷിതവുമായ ഒരു സ്റ്റേജിംഗ് പരിസ്ഥിതി ഉണ്ടാക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ഇത് നിങ്ങളുടെ രഹസ്യ API കീ ആരും ആരും മോഷ്ടിക്കുന്നത് തടയും, കൂടാതെ ബന്ധപ്പെട്ടില്ലാത്ത പുതിയ സ്ട്രിങ്ങുകൾ ചേർത്തുകൊണ്ട് നിങ്ങളുടെ പരിഭാഷാ പ്രോജക്ട് അനാവശ്യമായി വലുതാകുന്നത് തടയും.

ഞങ്ങളുടെ GitHub പ്രൊഫൈലിൽ പൂര്‍ണ്ണമായ ഉദാഹരണം കാണുക. അവിടെ, App Router ഉപയോഗിച്ച് ഇത് എങ്ങനെ ചെയ്യാമെന്നതിന് ഒരു ഉദാഹരണവും നിങ്ങൾക്ക് ലഭിക്കും! പ്രശ്നങ്ങൾ നേരിട്ടാൽ, ദയവായി ഞങ്ങളുമായി ബന്ധപ്പെടുക, സഹായിക്കാൻ ഞങ്ങൾ സന്തോഷത്തോടെ തയ്യാറാണ്.

TacoTranslate നിങ്ങളുടെ React ആപ്ലിക്കേഷനുകൾ 75-ലധികം ഭാഷകളിലേക്ക്‌ക്കും അവയിൽ നിന്നുമുള്ളവയിലേക്കും ഓട്ടോമാറ്റിക്കായി വേഗത്തിൽ ലോക്കലൈസ് ചെയ്യാൻ സഹായിക്കുന്നു. ഇന്ന് തുടങ്ങൂ!