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

ഇന്റർനാഷണലൈസേഷൻ (i18n) ഉപയോഗിച്ച് നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ കൂടുതൽ പ്രവേശനയോഗ്യമായും പുതിയ വിപണികളിലേക്ക് എത്തിച്ചേരുന്ന വിധത്തിലാക്കുക.

ലോകം കൂടുതൽ ആഗോളമാകുമ്പോൾ, വ്യത്യസ്ത രാജ്യങ്ങളിലെയും സംസ്കാരങ്ങളിലെയും ഉപഭോക്താക്കളെ പരിഗണിച്ച് വെബ് ഡെവലപ്പർമാർക്ക് ആപ്ലിക്കേഷനുകൾ രൂപകൽപ്പന ചെയ്യേണ്ടതിന്റെ പ്രാധാന്യം കൂടുതൽ കൂടുകയാണ്. ഇതു കൈവരിക്കാൻ സഹായിക്കുന്ന പ്രധാന മാർഗങ്ങളിൽ ഒന്ന് അന്താരാഷ്ട്രവൽക്കരണം (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: ഡിഫോൾട്ട് ഫോള്ബാക്ക് ലോക്കൽ കോഡ്. ഈ ഉദാഹരണത്തിൽ നാം ഇത് ഇംഗ്ലീഷിനായി 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: പ്രവർത്തനത്തിലാക്കുക এবং പരീക്ഷിക്കുക!

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