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

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

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 അപ്ലിക്കേഷൻ lediglich പിന്തുണയുള്ള ഭാഷകളുടെ പട്ടികയൊപ്പമാണ് ക്രമീകരിച്ചിരിക്കുന്നത്. അടുത്തത് ചെയ്യാനിരിക്കുന്നത് നിങ്ങളുടെ എല്ലാ പേജുകൾക്കും തർജ്ജമകൾ വായിക്കലാണ്. അതിനായി, നിങ്ങളുടെ ആവശ്യാനുസരണം getTacoTranslateStaticProps അല്ലെങ്കിൽ getTacoTranslateServerSideProps ഉപയോഗിക്കാം.

ഈ ഫംഗ്ഷനുകൾക്ക് മൂന്ന് ആർഗ്യുമെന്റുകൾ ആവശ്യമാണ്: ഒന്ന് Next.js Static Props Context ഒബ്ജക്റ്റ്, TacoTranslate-ക്കുള്ള ക്രമീകരണങ്ങൾ, കൂടാതെ ഐച്ഛിക Next.js പ്രോപ്പർട്ടികൾ. ശ്രദ്ധിക്കുക: revalidate getTacoTranslateStaticProps-ൽ പൂർവ്വനിശ്ചയപ്രകാരം 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-ലധികം ഭാഷകളിലേക്ക്‌യും അവരിൽ നിന്നുമുള്ളതായും സ്വയം ലോക്കലൈസ് ചെയ്യാൻ സഹായിക്കുന്നു. ഇന്ന് തന്നെ ആരംഭിക്കുക!