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 കീയും സൃഷ്ടിക്കുക. അവയെ എങ്ങനെ ചുറ്റുപാടുള്ള മാറ്റങ്ങളായി സേവ് ചെയ്യാമെന്ന് നോക്കാം. read കീയെ ഞങ്ങൾ public എന്ന് വിളിക്കുന്നു, അതേ സമയം read/write കീ secret ആണ്. ഉദാഹരണത്തിന്, നിങ്ങൾ അവയെ നിങ്ങളുടെ പ്രോജക്ടിന്റെ റൂട്ട് ഡൈരക്ടറിയിലുള്ള .env ഫയലിൽ ചേർക്കാം.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ക്ലയന്റ് സൈഡ് പ്രൊഡക്ഷൻ പരിസരങ്ങളിലേക്ക് രഹസ്യം ആയ read/write API കീ ഒരിക്കലും പുറത്തുവിടരുത്.

നാം മറ്റുള്ള രണ്ട് പരിസ്ഥിതി മാറ്റങ്ങൾ കൂട്ടിച്ചേർക്കും: TACOTRANSLATE_DEFAULT_LOCALE மற்றும் TACOTRANSLATE_ORIGIN.

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

.env

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.

/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 ഒബ്ജക്റ്റ്, ടാക്കോട്രാൻസ്ലേറ്റിന്റെ കോൺഫിഗറേഷൻ, ഓപ്ഷണൽ 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 കീ മോഷ്ടിക്കാതിരിക്കാൻ സഹായിക്കും, കൂടാതെ അനുഭവിക്കാത്ത, ബന്ധപ്പെട്ടിട്ടില്ലാത്ത പുതിയ സ്ട്രിങ്കുകൾ ചേർത്ത് നിങ്ങളുടെ വിവർത്തന പദ്ധതി അളവിനു മീതെ വലുതാക്കുന്നത് തടയും.