Next.js API रूट और मिडलवेयर
api/ डायरेक्टरी में सर्वररहित API एंडपॉइंट बनाएँ, Route Handlers में अनुरोध संसाधित करें, और प्रमाणीकरण तथा रीडायरेक्ट के लिए एज मिडलवेयर चलाएँ।
Next.js API रूट और मिडलवेयर, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
एपीआई रूट क्यों?
Next.js आपके ऐप के साथ एक सर्वर जोड़ता है — आप अलग नोड प्रोजेक्ट के बिना अपने पृष्ठों के साथ बैकएंड एंडपॉइंट लिख सकते हैं। प्रॉक्सी, फ़ॉर्म सबमिशन, वेबहुक और छोटे एपीआई के लिए यह बहुत उपयोगी है।
पेज राउटर के एपीआई रूट
pages/api/ की फ़ाइलें Express-शैली के (req, res) के साथ एक डिफ़ॉल्ट फ़ंक्शन एक्सपोर्ट करती हैं।
// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'GET') {
const users = await db.users.findMany();
return res.json(users);
}
if (req.method === 'POST') {
const user = await db.users.create({ data: req.body });
return res.status(201).json(user);
}
return res.status(405).end();
}ऐप राउटर के रूट हैंडलर
ऐप राउटर वेब मानक Request/Response एपीआई का उपयोग करता है। प्रत्येक HTTP विधि एक नामित एक्सपोर्ट होती है।
// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const users = await db.users.findMany();
return NextResponse.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
const user = await db.users.create({ data: body });
return NextResponse.json(user, { status: 201 });
}डायनेमिक एपीआई रूट
डायनेमिक सेगमेंट इसी तरह काम करते हैं: app/api/users/[id]/route.ts, /api/users/123 से मेल खाता है।
// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
const user = await db.users.findUnique({ where: { id: params.id }});
if (!user) return new Response('Not Found', { status: 404 });
return Response.json(user);
}कुकी और हेडर पढ़ना
ऐप राउटर में next/headers से सहायक फ़ंक्शन का उपयोग करें। ये अनुरोध के दायरे में काम करते हैं।
import { cookies, headers } from 'next/headers';
export async function GET() {
const token = cookies().get('token')?.value;
const userAgent = headers().get('user-agent');
// ...
}प्रतिक्रियाएँ स्ट्रीम करना
रूट हैंडलर स्ट्रीमिंग प्रतिक्रिया लौटा सकते हैं — यह एआई चैट प्रतिक्रियाओं या बड़ी फ़ाइल बनाने के लिए उपयोगी है।
export async function GET() {
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
for (let i = 0; i < 5; i++) {
controller.enqueue(encoder.encode(`chunk ${i}\n`));
await new Promise(r => setTimeout(r, 500));
}
controller.close();
}
});
return new Response(stream);
}मिडलवेयर — रूट से पहले चलाएँ
प्रोजेक्ट की मूल निर्देशिका में मौजूद middleware.ts, अनुरोधों के पृष्ठों या एपीआई रूट तक पहुँचने से पहले चलता है। इसका उपयोग प्रमाणीकरण जाँच, रीडायरेक्ट, हेडर में बदलाव और A/B परीक्षण के लिए करें।
// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}मिडलवेयर मिलानकर्ता
मिलानकर्ता कॉन्फ़िगरेशन से उन पथों को सीमित करें जिन पर मिडलवेयर चलता है।
export const config = {
matcher: [
'/dashboard/:path*',
'/api/:path*',
'/((?!_next/static|_next/image|favicon.ico).*)'
]
};मिडलवेयर रनटाइम
मिडलवेयर डिफ़ॉल्ट रूप से एज रनटाइम पर चलता है — यह हल्का V8 आइसोलेट है, पूर्ण नोड नहीं। उपलब्ध एपीआई सीमित होते हैं: fs जैसे नोड मॉड्यूल और नेटिव निर्भरताएँ उपलब्ध नहीं होतीं।
मिडलवेयर के साथ प्रमाणीकरण पैटर्न
सामान्य तरीका: मिडलवेयर में JWT सत्यापित करें, उसके न होने या अमान्य होने पर लॉगिन पर रीडायरेक्ट करें और डिकोड किए गए उपयोगकर्ता को ऐसे अनुरोध हेडर में जोड़ें जिसे बाद के रूट पढ़ सकें।
import jwt from 'jsonwebtoken';
export function middleware(req: NextRequest) {
const token = req.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', req.url));
try {
const decoded = jwt.verify(token, process.env.SECRET!);
const res = NextResponse.next();
res.headers.set('x-user-id', String(decoded.sub));
return res;
} catch {
return NextResponse.redirect(new URL('/login', req.url));
}
}मिडलवेयर में दर-सीमा तय करना
अपने एपीआई लॉजिक तक पहुँचने से पहले प्रति-IP दर-सीमा लागू करने के लिए मिडलवेयर को KV स्टोर (अपस्टैश, वर्सेल KV) के साथ मिलाएँ।
एपीआई रूट का उपयोग कब न करें
अलग सूक्ष्म-सेवाओं या साझा एपीआई के लिए वास्तविक बैकएंड तैनात करें (होनो, एक्सप्रेस, NestJS)। Next.js के एपीआई रूट प्रॉक्सी, वेबहुक और ऐप-विशिष्ट एंडपॉइंट के लिए शानदार हैं — अन्य क्लाइंट को सार्वजनिक एपीआई देने के लिए नहीं।
त्वरित जाँच
Next.js मिडलवेयर कहाँ चलता है और इसका सबसे सामान्य उपयोग क्या है?
पुनरावलोकन: एपीआई रूट और मिडलवेयर
पेज राउटर: pages/api में req/res। ऐप राउटर: app/api/.../route.ts में विधि एक्सपोर्ट (GET/POST/आदि), जो Request/Response का उपयोग करते हैं। next/headers के ज़रिए कुकी/हेडर पढ़ें। ReadableStream से स्ट्रीमिंग प्रतिक्रियाएँ दें। middleware.ts रूट से पहले एज पर चलता है — प्रमाणीकरण, रीडायरेक्ट और हेडर के लिए। मिलानकर्ता कॉन्फ़िगरेशन पथों को सीमित करता है। सार्वजनिक एपीआई के लिए वास्तविक बैकएंड का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Next.js API रूट और मिडलवेयर” पाठ निःशुल्क है?
हाँ—“Next.js API रूट और मिडलवेयर” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Next.js API रूट और मिडलवेयर” में मैं क्या सीखूँगा?
api/ डायरेक्टरी में सर्वररहित API एंडपॉइंट बनाएँ, Route Handlers में अनुरोध संसाधित करें, और प्रमाणीकरण तथा रीडायरेक्ट के लिए एज मिडलवेयर चलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Next.js API रूट और मिडलवेयर” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Pages Router बनाम App Router
- सर्वर कंपोनेंट और क्लाइंट कंपोनेंट
- SSG, SSR और ISR
- Next.js API रूट और मिडलवेयर