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

നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ കൂടുതൽ ആക്സസിബിൾ ആക്കുകയും അന്താരാഷ്ട്രവത്കരണം (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 ആപ്ലിക്കേഷന്‍ UI-ല്‍ ഒരു പ്രോജക്ട് സൃഷ്ടിച്ച് അതിന്റെ API കീസുദ്യോഗത്തില്‍ നാവിഗേറ്റ് ചെയ്യുക. Create one read key, and one read/write key. നാം അവയെ പരിസ്ഥിതി വ്യത്യാസങ്ങളായി (environment variables) സംരക്ഷിക്കും. The read key is what we call public and the read/write key is secret. ഉദാഹരണത്തിന്, நீங்கள் അവ പ്രോജക്ടിന്റെ റൂട്ടിലുള്ള .env ഫയലില്‍ ചേർക്കാവുന്നതാണ്.

.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. Origins-നെക്കുറിച്ച് കൂടുതൽ വായിക്കുക.

.env

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

പടി 3: TacoTranslate ക്രമീകരിക്കൽ

നിങ്ങളുടെ ആപ്പിലേക്ക് TacoTranslate സംയോജിപ്പിക്കാൻ, മുമ്പ് നൽകിയ API കീകൾ ഉപയോഗിച്ച് ഒരു ക്ലയന്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഉദാഹരണത്തിന്, /tacotranslate-client.js എന്ന പേരിൽ ഒരു ഫയൽ സൃഷ്ടിക്കുക.

/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 പ്രൊവൈഡറെ ചേർക്കും.

/pages/_app.tsx

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 സൃഷ്ടിക്കുകയോ തിരുത്തുകയോ ചെയ്ത് ആരംഭിക്കും.

/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 പോലൊരു പേജ് ഫയൽ ഉണ്ടെന്ന് കരുതാം.

/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 കീ മോഷ്ടിക്കുന്നത് തടയും, കൂടാതെ പുതിയ, അസംബന്ധ സ്ട്രിംഗുകൾ ചേർത്ത് നിങ്ങളുടെ വിവർത്തന പ്രോജക്ട് അനാവശ്യമായി വലുതാകുന്നത് ഒഴിവാക്കും.