Next.js ആപ്ലിക്കേഷനിൽ Pages Router ഉപയോഗിച്ച് ഇന്റർനാഷണലൈസേഷൻ എങ്ങനെ നടപ്പിലാക്കാം

നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ കൂടുതൽ ആക്‌സസ് ചെയ്യാവുന്നതും, അന്താരാഷ്ട്രീകരണം (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 അക്കൗണ്ട്, ഒരു വിവർത്തന പ്രോജക്ട്, അടുത്തുള്ള API കീകൾ സൃഷ്‌ടിക്കാനുള്ള സമയംയായി. ഇവിടെ അക്കൗണ്ട് സൃഷ്‌ടിക്കുക. ഇതു സൗജന്യമാണ്, കൂടാതെ ക്രെഡിറ്റ് കാർഡ് ചേർക്കാൻ ആവശ്യമില്ല.

TacoTranslate അപ്ലിക്കേഷൻ UI-യിൽ ഒരു പ്രോജക്ട് സൃഷ്ടിച്ച്, അതിന്റെ API കീകൾ ടാബിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക. ഒരു read കീയും ഒരു read/write കീയും സൃഷ്ടിക്കുക. അവയെ നാം environment variables ആയി സംരക്ഷിക്കും. read കീയെ നാം public എന്ന് വിളിക്കുന്നു, മറ്റത്തായി read/write കീയാണ് secret. ഉദാഹരണത്തിന്, നിങ്ങൾ അവയെ നിങ്ങളുടെ പ്രോജക്ടിന്റെ റൂട്ടിലുള്ള .env ഫയലിൽ ചേർക്കാം.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ഗ്രാഹക വശം പ്രൊഡക്ഷൻ പരിസരങ്ങൾക്ക് രഹസ്യമായ read/write API കി ഒരിക്കലും വെളിപ്പെടുത്തരുതെന്ന് ഉറപ്പാക്കുക.

നമുക്ക് രണ്ട് അധികം എൻവയറൺമെന്റ് വേരിയബിളുകൾ കൂടി ചേർക്കാം: TACOTRANSLATE_DEFAULT_LOCALE and TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: ഡിഫോൾട്ട് ഫാൽബാക്ക് ലോക്കേൽ കോഡ്. ഈ ഉദാഹരണത്തിൽ, അത് en ആയി ഇംഗ്ലീഷിന് സെറ്റ് ചെയ്യും.
TACOTRANSLATE_ORIGIN: നിങ്ങളുടെ സ്ട്രിംഗുകൾ സൂക്ഷിക്കപ്പെടുന്ന “ഫോൾഡർ”, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ URL പോലുള്ളത്. ഓറിയിന്‍സ് കുറിച്ച് കൂടുതൽ ഇവിടെ വായിക്കുക.

.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 ഉപയോഗിക്കാം.

ഈ ഫംഗ്ഷനുകൾക്ക് മൂന്ന് arguments ഉണ്ടാകുന്നു: ഒന്ന് Next.js Static Props Context ഒബ്ജക്റ്റ്, TacoTranslate ന്റെ ക്രമീകരണം, കൂടാതെ ഐച്ഛികമായ Next.js പ്രോപ്പർട്ടികൾ. getTacoTranslateStaticProps എന്നതിന്റെ revalidate ഡീഫോൾട്ട് ആയി 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: വിന്യസിച്ച് പരിശോധിക്കുക!

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