M

MLOG

मराठी

Next.js रूट हँडलर्स वापरून शक्तिशाली API एंडपॉइंट्स कसे तयार करायचे ते शिका. हे मार्गदर्शक मूलभूत सेटअपपासून प्रगत तंत्रांपर्यंत, व्यावहारिक उदाहरणे आणि सर्वोत्तम पद्धतींसह सर्वकाही कव्हर करते.

Next.js रूट हँडलर्स: API एंडपॉइंट तयार करण्यासाठी एक व्यापक मार्गदर्शक

Next.js ने सर्व्हर-साइड रेंडरिंग, स्टॅटिक साइट जनरेशन आणि आता, रूट हँडलर्स यांसारख्या शक्तिशाली वैशिष्ट्यांसह वेब ॲप्लिकेशन्स बनवण्याच्या पद्धतीत क्रांती आणली आहे. रूट हँडलर्स आपल्या Next.js ॲप्लिकेशनमध्ये थेट API एंडपॉइंट्स तयार करण्याचा एक लवचिक आणि कार्यक्षम मार्ग प्रदान करतात. हे मार्गदर्शक रूट हँडलर्सची संकल्पना, त्यांचे फायदे आणि मजबूत API तयार करण्यासाठी त्यांचा प्रभावीपणे वापर कसा करायचा हे स्पष्ट करते.

Next.js रूट हँडलर्स काय आहेत?

रूट हँडलर्स हे Next.js प्रोजेक्टच्या app डिरेक्टरीमध्ये परिभाषित केलेले फंक्शन्स आहेत जे येणाऱ्या HTTP विनंत्या हाताळतात. जुन्या pages/api पद्धतीपेक्षा (जी API रूट्स वापरते), रूट हँडलर्स तुमच्या React कंपोनंट्ससोबत API एंडपॉइंट्स परिभाषित करण्याचा अधिक सुव्यवस्थित आणि लवचिक मार्ग देतात. हे मूलतः सर्व्हरलेस फंक्शन्स आहेत जे एजवर किंवा तुमच्या निवडलेल्या सर्व्हर वातावरणात कार्यान्वित होतात.

रूट हँडलर्सना तुमच्या Next.js ॲप्लिकेशनचे बॅकएंड लॉजिक समजा, जे विनंत्यांवर प्रक्रिया करणे, डेटाबेसशी संवाद साधणे आणि प्रतिसाद परत करण्यासाठी जबाबदार असतात.

रूट हँडलर्स वापरण्याचे फायदे

तुमचा Next.js प्रोजेक्ट सेट करणे

रूट हँडलर्समध्ये जाण्यापूर्वी, तुमच्याकडे app डिरेक्टरीसह Next.js प्रोजेक्ट सेट असल्याचे सुनिश्चित करा. तुम्ही नवीन प्रोजेक्ट सुरू करत असल्यास, खालील कमांड वापरा:

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

नवीन राउटिंग सिस्टम सक्षम करण्यासाठी सेटअप प्रक्रियेदरम्यान app डिरेक्टरी निवडा.

तुमचा पहिला रूट हँडलर तयार करणे

चला एक साधा API एंडपॉइंट तयार करूया जो JSON प्रतिसाद देतो. app डिरेक्टरीमध्ये एक नवीन डिरेक्टरी तयार करा, उदाहरणार्थ, /app/api/hello. या डिरेक्टरीमध्ये, route.ts (किंवा तुम्ही TypeScript वापरत नसल्यास 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) {
 // Logic to retrieve all users from the database
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // Example data
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // Parse the request body as JSON
 // Logic to create a new user in the database using 'data'
 const newUser = { id: 3, name: data.name, email: data.email }; // Example
 return NextResponse.json(newUser, { status: 201 }); // Return the new user with a 201 Created status code
}

स्पष्टीकरण:

रिक्वेस्ट डेटा ॲक्सेस करणे

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 });
}

प्रतिसाद परत करणे

NextResponse ऑब्जेक्ट API प्रतिसाद तयार करण्यासाठी वापरला जातो. हे हेडर्स, स्टेटस कोड आणि रिस्पॉन्स बॉडी सेट करण्यासाठी अनेक मेथड्स प्रदान करते.

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*'], // Apply this middleware to paths starting with /protected/
};

स्पष्टीकरण:

एरर हँडलिंग (Error Handling)

मजबूत APIs तयार करण्यासाठी योग्य एरर हँडलिंग महत्त्वाचे आहे. तुम्ही अपवाद हाताळण्यासाठी आणि योग्य एरर प्रतिसाद परत करण्यासाठी try...catch ब्लॉक्स वापरू शकता.

export async function GET(request: Request) {
 try {
 // Simulate an error
 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)); // Simulate delay
 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'; // Replace with a strong, randomly generated secret

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) {
 // Assume you have a function to get the user's role from the token or session
 const userRole = await getUserRole(request);

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

 // Logic to retrieve admin data
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // Replace with your actual logic to extract the user's role from the request
 // This could involve verifying a JWT token or checking a session
 return 'admin'; // Example: hardcoded role for demonstration
}

रूट हँडलर्स तैनात करणे

रूट हँडलर्स तुमच्या निवडलेल्या होस्टिंग प्रदात्यावर सर्व्हरलेस फंक्शन्स म्हणून तैनात केले जातात. Next.js Vercel, Netlify, AWS, आणि इतरांसह विविध डिप्लॉयमेंट प्लॅटफॉर्मला सपोर्ट करते.

Vercel साठी, डिप्लॉयमेंट तुमच्या Git रिपॉझिटरीला Vercel शी कनेक्ट करणे आणि तुमचा कोड पुश करण्याइतके सोपे आहे. Vercel आपोआप तुमचा Next.js प्रोजेक्ट ओळखतो आणि तुमचे रूट हँडलर्स सर्व्हरलेस फंक्शन्स म्हणून तैनात करतो.

प्रगत तंत्रे

एज फंक्शन्स (Edge Functions)

रूट हँडलर्सना एज फंक्शन्स म्हणून तैनात केले जाऊ शकते, जे तुमच्या वापरकर्त्यांच्या जवळ, CDN च्या काठावर (edge) कार्यान्वित केले जातात. यामुळे लेटेंसी लक्षणीयरीत्या कमी होऊ शकते आणि कार्यप्रदर्शन सुधारू शकते.

एखाद्या रूट हँडलरला एज फंक्शन म्हणून तैनात करण्यासाठी, तुमच्या 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)

सर्व्हर ॲक्शन्स तुम्हाला तुमच्या React कंपोनंट्समधून थेट सर्व्हर-साइड कोड कार्यान्वित करण्याची परवानगी देतात. रूट हँडलर्स आणि सर्व्हर ॲक्शन्स एकत्र अखंडपणे काम करतात, ज्यामुळे तुम्ही सहजपणे गुंतागुंतीचे ॲप्लिकेशन्स तयार करू शकता.

सर्व्हर ॲक्शन वापरून रूट हँडलरला कॉल करण्याचे एक उदाहरण येथे आहे:

// 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(); // Refresh the page to reflect the changes
 }
}

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 एंडपॉइंट्स तयार करण्याचा एक शक्तिशाली आणि लवचिक मार्ग प्रदान करतात. रूट हँडलर्सचा फायदा घेऊन, तुम्ही सहजपणे मजबूत APIs तयार करू शकता, तुमचे बॅकएंड लॉजिक तुमच्या React कंपोनंट्ससोबत ठेवू शकता आणि मिडलवेअर, स्ट्रीमिंग आणि एज फंक्शन्स यांसारख्या वैशिष्ट्यांचा लाभ घेऊ शकता.

या व्यापक मार्गदर्शकाने मूलभूत सेटअपपासून प्रगत तंत्रांपर्यंत सर्वकाही कव्हर केले आहे. या मार्गदर्शकात नमूद केलेल्या सर्वोत्तम पद्धतींचे पालन करून, तुम्ही उच्च-गुणवत्तेचे APIs तयार करू शकता जे सुरक्षित, कार्यक्षम आणि देखरेख करण्यायोग्य असतील.