M

MLOG

മലയാളം

Next.js റൂട്ട് ഹാൻഡ്‌ലറുകൾ ഉപയോഗിച്ച് ശക്തമായ API എൻഡ്‌പോയിന്റുകൾ എങ്ങനെ നിർമ്മിക്കാമെന്ന് പഠിക്കുക. ഈ ഗൈഡ് അടിസ്ഥാന സജ്ജീകരണം മുതൽ നൂതന സാങ്കേതിക വിദ്യകൾ വരെ ഉൾക്കൊള്ളുന്നു.

Next.js റൂട്ട് ഹാൻഡ്‌ലറുകൾ: API എൻഡ്‌പോയിന്റ് നിർമ്മാണത്തിനുള്ള ഒരു സമഗ്ര ഗൈഡ്

Next.js അതിൻ്റെ സെർവർ-സൈഡ് റെൻഡറിംഗ്, സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ, ഇപ്പോൾ റൂട്ട് ഹാൻഡ്‌ലറുകൾ പോലുള്ള ശക്തമായ ഫീച്ചറുകളിലൂടെ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിച്ചു. നിങ്ങളുടെ Next.js ആപ്ലിക്കേഷനിൽ നേരിട്ട് API എൻഡ്‌പോയിന്റുകൾ നിർമ്മിക്കുന്നതിനുള്ള വഴക്കമുള്ളതും കാര്യക്ഷമവുമായ ഒരു മാർഗ്ഗം റൂട്ട് ഹാൻഡ്‌ലറുകൾ നൽകുന്നു. ഈ ഗൈഡ് റൂട്ട് ഹാൻഡ്‌ലറുകൾ എന്ന ആശയം, അവയുടെ പ്രയോജനങ്ങൾ, കരുത്തുറ്റ API-കൾ നിർമ്മിക്കാൻ അവ എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാം എന്നിവയെക്കുറിച്ച് വിശദീകരിക്കുന്നു.

എന്താണ് Next.js റൂട്ട് ഹാൻഡ്‌ലറുകൾ?

റൂട്ട് ഹാൻഡ്‌ലറുകൾ ഒരു Next.js പ്രോജക്റ്റിന്റെ app ഡയറക്‌ടറിക്കുള്ളിൽ നിർവചിച്ചിട്ടുള്ള ഫംഗ്‌ഷനുകളാണ്, അവ വരുന്ന HTTP അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു. പഴയ pages/api സമീപനത്തിൽ (API റൂട്ടുകൾ ഉപയോഗിക്കുന്ന) നിന്ന് വ്യത്യസ്തമായി, റൂട്ട് ഹാൻഡ്‌ലറുകൾ നിങ്ങളുടെ റിയാക്റ്റ് കമ്പോണന്റുകൾക്കൊപ്പം API എൻഡ്‌പോയിന്റുകൾ നിർവചിക്കുന്നതിന് കൂടുതൽ ലളിതവും വഴക്കമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. അവ അടിസ്ഥാനപരമായി എഡ്ജിലോ നിങ്ങൾ തിരഞ്ഞെടുത്ത സെർവർ പരിതസ്ഥിതിയിലോ പ്രവർത്തിക്കുന്ന സെർവർലെസ് ഫംഗ്ഷനുകളാണ്.

റൂട്ട് ഹാൻഡ്‌ലറുകളെ നിങ്ങളുടെ Next.js ആപ്ലിക്കേഷൻ്റെ ബാക്കെൻഡ് ലോജിക്കായി കണക്കാക്കാം, അഭ്യർത്ഥനകൾ പ്രോസസ്സ് ചെയ്യുന്നതിനും ഡാറ്റാബേസുകളുമായി സംവദിക്കുന്നതിനും പ്രതികരണങ്ങൾ നൽകുന്നതിനും ഇവ ഉത്തരവാദികളാണ്.

റൂട്ട് ഹാൻഡ്‌ലറുകൾ ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനങ്ങൾ

നിങ്ങളുടെ Next.js പ്രോജക്റ്റ് സജ്ജീകരിക്കുന്നു

റൂട്ട് ഹാൻഡ്‌ലറുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ Next.js പ്രോജക്റ്റ് app ഡയറക്‌ടറി ഉപയോഗിച്ച് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങൾ ഒരു പുതിയ പ്രോജക്റ്റ് ആരംഭിക്കുകയാണെങ്കിൽ, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിക്കുക:

npx create-next-app@latest my-nextjs-app

പുതിയ റൂട്ടിംഗ് സിസ്റ്റം പ്രവർത്തനക്ഷമമാക്കുന്നതിന് സജ്ജീകരണ പ്രക്രിയയിൽ app ഡയറക്‌ടറി തിരഞ്ഞെടുക്കുക.

നിങ്ങളുടെ ആദ്യത്തെ റൂട്ട് ഹാൻഡ്‌ലർ നിർമ്മിക്കുന്നു

നമുക്ക് ഒരു JSON പ്രതികരണം നൽകുന്ന ഒരു ലളിതമായ API എൻഡ്‌പോയിന്റ് നിർമ്മിക്കാം. app ഡയറക്‌ടറിക്കുള്ളിൽ ഒരു പുതിയ ഡയറക്‌ടറി ഉണ്ടാക്കുക, ഉദാഹരണത്തിന്, /app/api/hello. ഈ ഡയറക്‌ടറിക്കുള്ളിൽ, route.ts (അല്ലെങ്കിൽ നിങ്ങൾ ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നില്ലെങ്കിൽ route.js) എന്ന പേരിൽ ഒരു ഫയൽ ഉണ്ടാക്കുക.

നിങ്ങളുടെ ആദ്യത്തെ റൂട്ട് ഹാൻഡ്‌ലറിൻ്റെ കോഡ് താഴെ നൽകുന്നു:

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from Next.js Route Handlers!' });
}

വിശദീകരണം:

ഇപ്പോൾ, നിങ്ങളുടെ ബ്രൗസറിൽ /api/hello എന്നതിലേക്ക് പോകുന്നതിലൂടെയോ അല്ലെങ്കിൽ curl അല്ലെങ്കിൽ Postman പോലുള്ള ഒരു ടൂൾ ഉപയോഗിച്ചോ നിങ്ങൾക്ക് ഈ എൻഡ്‌പോയിൻ്റ് ആക്സസ് ചെയ്യാൻ കഴിയും.

വിവിധ HTTP മെത്തേഡുകൾ കൈകാര്യം ചെയ്യുന്നു

റൂട്ട് ഹാൻഡ്‌ലറുകൾ GET, POST, PUT, DELETE, PATCH, OPTIONS പോലുള്ള വിവിധ HTTP മെത്തേഡുകളെ പിന്തുണയ്ക്കുന്നു. ഒരേ route.ts ഫയലിൽ തന്നെ ഓരോ മെത്തേഡിനും വെവ്വേറെ ഫംഗ്ഷനുകൾ നിർവചിക്കാൻ നിങ്ങൾക്ക് കഴിയും.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // ഡാറ്റാബേസിൽ നിന്ന് എല്ലാ ഉപയോക്താക്കളെയും വീണ്ടെടുക്കാനുള്ള ലോജിക്
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // ഉദാഹരണ ഡാറ്റ
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // അഭ്യർത്ഥന ബോഡി JSON ആയി പാഴ്സ് ചെയ്യുക
 // 'data' ഉപയോഗിച്ച് ഡാറ്റാബേസിൽ ഒരു പുതിയ ഉപയോക്താവിനെ സൃഷ്ടിക്കുന്നതിനുള്ള ലോജിക്
 const newUser = { id: 3, name: data.name, email: data.email }; // ഉദാഹരണം
 return NextResponse.json(newUser, { status: 201 }); // 201 Created സ്റ്റാറ്റസ് കോഡ് ഉപയോഗിച്ച് പുതിയ ഉപയോക്താവിനെ തിരികെ നൽകുക
}

വിശദീകരണം:

അഭ്യർത്ഥന ഡാറ്റ ആക്സസ് ചെയ്യുന്നു

request ഒബ്ജക്റ്റ്, ഹെഡറുകൾ, ക്വറി പാരാമീറ്ററുകൾ, അഭ്യർത്ഥന ബോഡി എന്നിവയുൾപ്പെടെ വരുന്ന അഭ്യർത്ഥനയെക്കുറിച്ചുള്ള വിവിധ വിവരങ്ങളിലേക്ക് ആക്സസ് നൽകുന്നു.

ഹെഡറുകൾ (Headers)

request.headers പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് അഭ്യർത്ഥന ഹെഡറുകൾ ആക്സസ് ചെയ്യാൻ കഴിയും:

export async function GET(request: Request) {
 const userAgent = request.headers.get('user-agent');
 console.log('User Agent:', userAgent);
 return NextResponse.json({ userAgent });
}

ക്വറി പാരാമീറ്ററുകൾ (Query Parameters)

ക്വറി പാരാമീറ്ററുകൾ ആക്സസ് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് URL കൺസ്ട്രക്റ്റർ ഉപയോഗിക്കാം:

export async function GET(request: Request) {
 const url = new URL(request.url);
 const searchParams = new URLSearchParams(url.search);
 const id = searchParams.get('id');
 console.log('ID:', id);
 return NextResponse.json({ id });
}

അഭ്യർത്ഥന ബോഡി (Request Body)

POST, PUT, PATCH അഭ്യർത്ഥനകൾക്കായി, ഉള്ളടക്ക തരം അനുസരിച്ച് request.json() അല്ലെങ്കിൽ request.text() മെത്തേഡുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് അഭ്യർത്ഥന ബോഡി ആക്സസ് ചെയ്യാൻ കഴിയും.

export async function POST(request: Request) {
 const data = await request.json();
 console.log('Data:', data);
 return NextResponse.json({ receivedData: data });
}

പ്രതികരണങ്ങൾ നൽകുന്നു

API പ്രതികരണങ്ങൾ നിർമ്മിക്കാൻ NextResponse ഒബ്ജക്റ്റ് ഉപയോഗിക്കുന്നു. ഹെഡറുകൾ, സ്റ്റാറ്റസ് കോഡുകൾ, റെസ്പോൺസ് ബോഡികൾ എന്നിവ സജ്ജീകരിക്കുന്നതിന് ഇത് നിരവധി മെത്തേഡുകൾ നൽകുന്നു.

JSON പ്രതികരണങ്ങൾ

JSON പ്രതികരണങ്ങൾ നൽകാൻ NextResponse.json() മെത്തേഡ് ഉപയോഗിക്കുക:

return NextResponse.json({ message: 'Success!', data: { name: 'John Doe' } }, { status: 200 });

ടെക്സ്റ്റ് പ്രതികരണങ്ങൾ

പ്ലെയിൻ ടെക്സ്റ്റ് പ്രതികരണങ്ങൾ നൽകാൻ new Response() കൺസ്ട്രക്റ്റർ ഉപയോഗിക്കുക:

return new Response('Hello, world!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

റീഡയറക്‌റ്റുകൾ (Redirects)

ഉപയോക്താക്കളെ മറ്റൊരു URL-ലേക്ക് റീഡയറക്‌ട് ചെയ്യാൻ NextResponse.redirect() ഉപയോഗിക്കുക:

import { redirect } from 'next/navigation';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.redirect(new URL('/new-location', request.url));
}

ഹെഡറുകൾ സജ്ജീകരിക്കുന്നു

NextResponse.json() അല്ലെങ്കിൽ new Response()-ലെ headers ഓപ്ഷൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് കസ്റ്റം ഹെഡറുകൾ സജ്ജീകരിക്കാം:

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'no-cache' } });

മിഡിൽവെയർ ഇൻ്റഗ്രേഷൻ

ഒരു അഭ്യർത്ഥന നിങ്ങളുടെ റൂട്ട് ഹാൻഡ്‌ലർ കൈകാര്യം ചെയ്യുന്നതിന് മുമ്പ് കോഡ് പ്രവർത്തിപ്പിക്കാൻ മിഡിൽവെയർ നിങ്ങളെ അനുവദിക്കുന്നു. ഓതൻ്റിക്കേഷൻ, ഓതറൈസേഷൻ, ലോഗിംഗ്, മറ്റ് ക്രോസ്-കട്ടിംഗ് കാര്യങ്ങൾ എന്നിവയ്ക്ക് ഇത് ഉപയോഗപ്രദമാണ്.

മിഡിൽവെയർ സൃഷ്ടിക്കുന്നതിന്, app ഡയറക്‌ടറിയിലോ ഏതെങ്കിലും സബ്ഡയറക്ടറിയിലോ middleware.ts (അല്ലെങ്കിൽ middleware.js) എന്ന പേരിൽ ഒരു ഫയൽ ഉണ്ടാക്കുക. മിഡിൽവെയർ ആ ഡയറക്‌ടറിയിലെയും അതിൻ്റെ സബ്ഡയറക്ടറികളിലെയും എല്ലാ റൂട്ടുകൾക്കും ബാധകമാകും.

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/protected/:path*'], // /protected/ എന്ന് തുടങ്ങുന്ന പാതകളിൽ ഈ മിഡിൽവെയർ പ്രയോഗിക്കുക
};

വിശദീകരണം:

എറർ ഹാൻഡ്‌ലിംഗ് (Error Handling)

കരുത്തുറ്റ API-കൾ നിർമ്മിക്കുന്നതിന് ശരിയായ എറർ ഹാൻഡ്‌ലിംഗ് നിർണായകമാണ്. എക്സെപ്ഷനുകൾ കൈകാര്യം ചെയ്യാനും ഉചിതമായ എറർ പ്രതികരണങ്ങൾ നൽകാനും നിങ്ങൾക്ക് try...catch ബ്ലോക്കുകൾ ഉപയോഗിക്കാം.

export async function GET(request: Request) {
 try {
 // ഒരു എറർ സിമുലേറ്റ് ചെയ്യുക
 throw new Error('Something went wrong!');
 } catch (error: any) {
 console.error('Error:', error);
 return NextResponse.json({ error: error.message }, { status: 500 });
 }
}

വിശദീകരണം:

സ്ട്രീമിംഗ് പ്രതികരണങ്ങൾ

റൂട്ട് ഹാൻഡ്‌ലറുകൾ സ്ട്രീമിംഗ് പ്രതികരണങ്ങളെ പിന്തുണയ്ക്കുന്നു, ഇത് ക്ലയിൻ്റിന് ഘട്ടംഘട്ടമായി ഡാറ്റ അയയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. വലിയ ഡാറ്റാസെറ്റുകൾക്കോ ദീർഘനേരം പ്രവർത്തിക്കുന്ന പ്രോസസ്സുകൾക്കോ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

import { Readable } from 'stream';
import { NextResponse } from 'next/server';

async function* generateData() {
 for (let i = 0; i < 10; i++) {
 await new Promise(resolve => setTimeout(resolve, 500)); // കാലതാമസം സിമുലേറ്റ് ചെയ്യുക
 yield `Data chunk ${i}\n`;
 }
}

export async function GET(request: Request) {
 const readableStream = Readable.from(generateData());

 return new Response(readableStream, {
 headers: { 'Content-Type': 'text/plain; charset=utf-8' },
 });
}

വിശദീകരണം:

ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും

നിങ്ങളുടെ API എൻഡ്‌പോയിന്റുകൾ സുരക്ഷിതമാക്കുന്നത് നിർണായകമാണ്. മിഡിൽവെയർ ഉപയോഗിച്ചോ അല്ലെങ്കിൽ നിങ്ങളുടെ റൂട്ട് ഹാൻഡ്‌ലറുകളിൽ നേരിട്ടോ നിങ്ങൾക്ക് ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും നടപ്പിലാക്കാൻ കഴിയും.

ഓതൻ്റിക്കേഷൻ (Authentication)

ഓതൻ്റിക്കേഷൻ അഭ്യർത്ഥന നടത്തുന്ന ഉപയോക്താവിൻ്റെ ഐഡൻ്റിറ്റി പരിശോധിക്കുന്നു. സാധാരണ ഓതൻ്റിക്കേഷൻ രീതികൾ ഇവയാണ്:

മിഡിൽവെയർ ഉപയോഗിച്ച് JWT ഓതൻ്റിക്കേഷൻ്റെ ഒരു ഉദാഹരണം താഴെ നൽകുന്നു:

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';

const secret = process.env.JWT_SECRET || 'your-secret-key'; // ശക്തവും ക്രമരഹിതമായി ജനറേറ്റ് ചെയ്തതുമായ ഒരു രഹസ്യ കീ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;

 if (!token) {
 return NextResponse.json({ message: 'Authentication required' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
 }
}

export const config = {
 matcher: ['/api/protected/:path*'],
};

ഓതറൈസേഷൻ (Authorization)

ഒരു ഉപയോക്താവിന് ഏതൊക്കെ റിസോഴ്സുകൾ ആക്സസ് ചെയ്യാൻ അനുവാദമുണ്ട് എന്ന് ഓതറൈസേഷൻ നിർണ്ണയിക്കുന്നു. ഇത് സാധാരണയായി റോളുകൾ അല്ലെങ്കിൽ പെർമിഷനുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്.

നിങ്ങളുടെ റൂട്ട് ഹാൻഡ്‌ലറുകളിൽ ഉപയോക്താവിൻ്റെ റോളുകളോ പെർമിഷനുകളോ പരിശോധിച്ച്, അവർക്ക് ആക്സസ് ഇല്ലെങ്കിൽ ഒരു എറർ നൽകിക്കൊണ്ട് ഓതറൈസേഷൻ നടപ്പിലാക്കാൻ കഴിയും.

// app/api/admin/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // ടോക്കണിൽ നിന്നോ സെഷനിൽ നിന്നോ ഉപയോക്താവിൻ്റെ റോൾ ലഭിക്കാൻ ഒരു ഫംഗ്ഷൻ ഉണ്ടെന്ന് കരുതുക
 const userRole = await getUserRole(request);

 if (userRole !== 'admin') {
 return NextResponse.json({ message: 'Unauthorized' }, { status: 403 });
 }

 // അഡ്മിൻ ഡാറ്റ വീണ്ടെടുക്കുന്നതിനുള്ള ലോജിക്
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // അഭ്യർത്ഥനയിൽ നിന്ന് ഉപയോക്താവിൻ്റെ റോൾ എക്സ്ട്രാക്റ്റ് ചെയ്യുന്നതിനുള്ള നിങ്ങളുടെ യഥാർത്ഥ ലോജിക് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക
 // ഇതിൽ ഒരു JWT ടോക്കൺ പരിശോധിക്കുകയോ അല്ലെങ്കിൽ ഒരു സെഷൻ പരിശോധിക്കുകയോ ഉൾപ്പെടാം
 return 'admin'; // ഉദാഹരണം: പ്രദർശനത്തിനായി ഹാർഡ്കോഡ് ചെയ്ത റോൾ
}

റൂട്ട് ഹാൻഡ്‌ലറുകൾ വിന്യസിക്കുന്നു

റൂട്ട് ഹാൻഡ്‌ലറുകൾ നിങ്ങൾ തിരഞ്ഞെടുത്ത ഹോസ്റ്റിംഗ് ദാതാവിൽ സെർവർലെസ് ഫംഗ്ഷനുകളായി വിന്യസിക്കുന്നു. Next.js വെർസൽ, നെറ്റ്ലിഫൈ, AWS എന്നിവയും മറ്റ് പല വിന്യാസ പ്ലാറ്റ്‌ഫോമുകളെയും പിന്തുണയ്ക്കുന്നു.

വെർസലിനായി, നിങ്ങളുടെ Git റെപ്പോസിറ്ററി വെർസലുമായി ബന്ധിപ്പിച്ച് നിങ്ങളുടെ കോഡ് പുഷ് ചെയ്യുന്നത് പോലെ ലളിതമാണ് വിന്യാസം. വെർസൽ നിങ്ങളുടെ Next.js പ്രോജക്റ്റ് സ്വയമേവ കണ്ടെത്തുകയും നിങ്ങളുടെ റൂട്ട് ഹാൻഡ്‌ലറുകളെ സെർവർലെസ് ഫംഗ്ഷനുകളായി വിന്യസിക്കുകയും ചെയ്യുന്നു.

നൂതന സാങ്കേതിക വിദ്യകൾ

എഡ്ജ് ഫംഗ്ഷനുകൾ (Edge Functions)

റൂട്ട് ഹാൻഡ്‌ലറുകളെ എഡ്ജ് ഫംഗ്ഷനുകളായി വിന്യസിക്കാൻ കഴിയും, അവ നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് അടുത്തുള്ള ഒരു CDN-ൻ്റെ എഡ്ജിൽ പ്രവർത്തിക്കുന്നു. ഇത് ലേറ്റൻസി ഗണ്യമായി കുറയ്ക്കുകയും പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യും.

ഒരു റൂട്ട് ഹാൻഡ്‌ലർ എഡ്ജ് ഫംഗ്ഷനായി വിന്യസിക്കാൻ, നിങ്ങളുടെ route.ts ഫയലിൽ edge റൺടൈം ചേർക്കുക:

export const runtime = 'edge';

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from the Edge!' });
}

സെർവർ ആക്ഷൻസ് (Server Actions)

നിങ്ങളുടെ റിയാക്റ്റ് കമ്പോണന്റുകളിൽ നിന്ന് നേരിട്ട് സെർവർ-സൈഡ് കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ സെർവർ ആക്ഷൻസ് നിങ്ങളെ അനുവദിക്കുന്നു. റൂട്ട് ഹാൻഡ്‌ലറുകളും സെർവർ ആക്ഷൻസും ഒരുമിച്ച് തടസ്സമില്ലാതെ പ്രവർത്തിക്കുന്നു, ഇത് സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾ എളുപ്പത്തിൽ നിർമ്മിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഒരു റൂട്ട് ഹാൻഡ്‌ലറെ വിളിക്കാൻ ഒരു സെർവർ ആക്ഷൻ ഉപയോഗിക്കുന്നതിൻ്റെ ഉദാഹരണം താഴെ നൽകുന്നു:

// app/components/MyComponent.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

async function handleSubmit(data: FormData) {
 'use server';

 const name = data.get('name');
 const email = data.get('email');

 const response = await fetch('/api/users', {
 method: 'POST',
 body: JSON.stringify({ name, email }),
 });

 if (response.ok) {
 router.refresh(); // മാറ്റങ്ങൾ പ്രതിഫലിപ്പിക്കുന്നതിന് പേജ് പുതുക്കുക
 }
}

export default function MyComponent() {
 const router = useRouter();

 return (
 

 
 


 
 


 
 

 );
}

കാഷിംഗ് (Caching)

കാഷിംഗ് നിങ്ങളുടെ API എൻഡ്‌പോയിന്റുകളുടെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തും. ബ്രൗസറുകളും CDN-കളും നിങ്ങളുടെ പ്രതികരണങ്ങൾ എങ്ങനെ കാഷെ ചെയ്യണമെന്ന് നിയന്ത്രിക്കുന്നതിന് നിങ്ങൾക്ക് Cache-Control ഹെഡർ ഉപയോഗിക്കാം.

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'public, max-age=3600' } });

ഈ ഉദാഹരണം Cache-Control ഹെഡർ public, max-age=3600 എന്ന് സജ്ജമാക്കുന്നു, ഇത് ബ്രൗസറുകളോടും CDN-കളോടും പ്രതികരണം ഒരു മണിക്കൂർ കാഷെ ചെയ്യാൻ പറയുന്നു.

മികച്ച രീതികൾ (Best Practices)

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ

റൂട്ട് ഹാൻഡ്‌ലറുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിൻ്റെ ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ താഴെ നൽകുന്നു:

അന്താരാഷ്ട്ര ഇ-കൊമേഴ്‌സ് ഉദാഹരണം: ഉപയോക്താവിൻ്റെ രാജ്യത്തെ അടിസ്ഥാനമാക്കി ഉൽപ്പന്ന വിലകൾ വീണ്ടെടുക്കാൻ ഉപയോഗിക്കുന്ന ഒരു റൂട്ട് ഹാൻഡ്‌ലർ. എൻഡ്‌പോയിന്റിന് അഭ്യർത്ഥനയുടെ ജിയോലൊക്കേഷൻ (IP വിലാസത്തിൽ നിന്ന് ഉരുത്തിരിഞ്ഞത്) ഉപയോഗിച്ച് ഉപയോക്താവിൻ്റെ സ്ഥാനം നിർണ്ണയിക്കാനും ഉചിതമായ കറൻസിയിൽ വിലകൾ നൽകാനും കഴിയും. ഇത് ഒരു പ്രാദേശികവൽക്കരിച്ച ഷോപ്പിംഗ് അനുഭവത്തിന് സംഭാവന നൽകുന്നു.

ഗ്ലോബൽ ഓതൻ്റിക്കേഷൻ ഉദാഹരണം: ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്കായി മൾട്ടി-ഫാക്ടർ ഓതൻ്റിക്കേഷൻ (MFA) നടപ്പിലാക്കുന്ന ഒരു റൂട്ട് ഹാൻഡ്‌ലർ. വിവിധ പ്രദേശങ്ങളിലെ സ്വകാര്യതാ നിയന്ത്രണങ്ങളെയും ടെലികമ്മ്യൂണിക്കേഷൻ ഇൻഫ്രാസ്ട്രക്ചറുകളെയും മാനിച്ചുകൊണ്ട് SMS കോഡുകൾ അയയ്ക്കുന്നതോ ഓതൻ്റിക്കേറ്റർ ആപ്പുകൾ ഉപയോഗിക്കുന്നതോ ഇതിൽ ഉൾപ്പെടാം.

ബഹുഭാഷാ ഉള്ളടക്ക വിതരണം: ഉപയോക്താവ് ഇഷ്ടപ്പെടുന്ന ഭാഷയിൽ ഉള്ളടക്കം നൽകുന്ന ഒരു റൂട്ട് ഹാൻഡ്‌ലർ. അഭ്യർത്ഥനയിലെ `Accept-Language` ഹെഡറിൽ നിന്ന് ഇത് നിർണ്ണയിക്കാനാകും. ശരിയായ UTF-8 എൻകോഡിംഗിൻ്റെയും ആവശ്യമുള്ളിടത്ത് വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള ഭാഷാ പിന്തുണയുടെയും ആവശ്യകത ഈ ഉദാഹരണം എടുത്തുകാണിക്കുന്നു.

ഉപസംഹാരം

Next.js റൂട്ട് ഹാൻഡ്‌ലറുകൾ നിങ്ങളുടെ Next.js ആപ്ലിക്കേഷനിൽ നേരിട്ട് API എൻഡ്‌പോയിന്റുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തവും വഴക്കമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. റൂട്ട് ഹാൻഡ്‌ലറുകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് എളുപ്പത്തിൽ കരുത്തുറ്റ API-കൾ നിർമ്മിക്കാനും, നിങ്ങളുടെ ബാക്കെൻഡ് ലോജിക് നിങ്ങളുടെ റിയാക്റ്റ് കമ്പോണന്റുകൾക്കൊപ്പം കൊളൊക്കേറ്റ് ചെയ്യാനും, മിഡിൽവെയർ, സ്ട്രീമിംഗ്, എഡ്ജ് ഫംഗ്ഷനുകൾ പോലുള്ള സവിശേഷതകൾ പ്രയോജനപ്പെടുത്താനും കഴിയും.

ഈ സമഗ്രമായ ഗൈഡ് അടിസ്ഥാന സജ്ജീകരണം മുതൽ നൂതന സാങ്കേതിക വിദ്യകൾ വരെ എല്ലാം ഉൾക്കൊള്ളുന്നു. ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, സുരക്ഷിതവും പ്രകടനക്ഷമവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ഉയർന്ന നിലവാരമുള്ള API-കൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും.