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

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