🟣 Data, Server और APIs · Lesson 25
Proxy (Middleware) और Redirects
proxy.js क्या है?
proxy.js project root में (app/ के बगल में) एक file है जिसका proxy() function request के pages तक पहुँचने से पहले चलता है। यह request को आगे जाने दे सकता है, redirect या rewrite कर सकता है, या headers और cookies जोड़ सकता है। Next.js 16 से पहले इसे middleware.js कहते थे।
Request में यह कहाँ चलता है
Example 1: पुराने URLs redirect (EduSite)
मान लीजिए पुरानी site /course/python-ai use करती थी और नई /courses/python-ai। Google में पुराने URLs indexed हैं — permanent redirect उनकी ranking transfer कर देता है।
JS – proxy.js
// proxy.js (project root – EduSite, complete file)
import { NextResponse } from 'next/server'
// Old URLs like /course/python-ai are permanently moved to /courses/python-ai.
export function proxy(request) {
const { pathname } = request.nextUrl
if (pathname.startsWith('/course/')) {
const url = request.nextUrl.clone()
url.pathname = pathname.replace('/course/', '/courses/')
return NextResponse.redirect(url, 308) // 308 = permanent (SEO keeps ranking)
}
return NextResponse.next() // continue normally
}
export const config = { matcher: ['/course/:path*'] }Terminal – redirect check
$ curl -I http://localhost:3000/course/python-ai
HTTP/1.1 308 Permanent Redirect
location: /courses/python-ai
matcher config
Matcher के बिना proxy हर request पर चलता है, images और JS files पर भी। इसे limit करें:
JS – matcher patterns
export const config = {
matcher: [
'/dashboard/:path*', // /dashboard and everything below
'/admin/:path*',
// everything EXCEPT static files, images and API:
'/((?!api|_next/static|_next/image|favicon.ico|.*\\.png$).*)',
],
}Example 2: rewrite (maintenance page)
JS – proxy.js rewrite
// proxy.js — show a maintenance page without changing the URL
import { NextResponse } from 'next/server'
export function proxy(request) {
if (process.env.MAINTENANCE === 'on' && !request.nextUrl.pathname.startsWith('/maintenance')) {
return NextResponse.rewrite(new URL('/maintenance', request.url))
}
return NextResponse.next()
}redirect()
- Browser URL बदलता है
- दो requests
- Moved pages के लिए (SEO)
rewrite()
- Browser URL वही रहता है
- एक request
- A/B tests, maintenance के लिए
Example 3: headers और cookies
JS – proxy.js headers
// proxy.js — add a header and remember the referral code from ?ref=
import { NextResponse } from 'next/server'
export function proxy(request) {
const res = NextResponse.next()
res.headers.set('X-Frame-Options', 'DENY') // security header
const ref = request.nextUrl.searchParams.get('ref')
if (ref) res.cookies.set('ref', ref, { maxAge: 60 * 60 * 24 * 30 }) // 30 days
return res
}middleware.js से migrate
Terminal + JS
# Next.js provides a codemod:
npx @next/codemod@latest middleware-to-proxy .
// Before (Next.js 15) // After (Next.js 16)
// middleware.js // proxy.js
export function middleware(req) { } → export function proxy(req) { }proxy कब use न करें
- Redirects की fixed list → next.config में
redirects()आसान है। - धीमा काम (database queries) → proxy हर matched request पर चलता है; इसे तेज़ रखें।
- अकेले security check के रूप में → pages/actions में भी verify करें (Auth lesson देखें)।
आम गलतियाँ
- proxy.js को
app/के अंदर रखना → यह project root (याsrc/) में होना चाहिए। - Redirect loops (
/loginको/loginपर redirect) → target path exclude करें। - Permanent move के लिए 302 → search engines पुराना URL रखते हैं; 301/308 use करें।
सारांश
proxy.js+export function proxy()routes से पहले चलता है।NextResponse.next(),.redirect()या.rewrite()लौटाएँ; headers/cookies जोड़ें।- हमेशा
matcherset करें और logic तेज़ रखें।
✅ Practice
एक proxy rule जोड़िए जो /blogs/:slug को 308 के साथ /blog/:slug पर redirect करे, और curl -I से verify कीजिए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Next.js 16 में middleware का नाम proxy क्यों हुआ?
इसकी भूमिका साफ़ करने के लिए: यह network proxy की तरह app के आगे बैठता है और तय करता है कि request आगे जाए, redirect हो या rewrite हो। Function अब proxy.js में export function proxy() है।
Redirect और rewrite में क्या फ़र्क है?
Redirect browser में URL बदल देता है (user नया URL देखता है)। Rewrite दूसरे path का content दिखाता है जबकि URL वही रहता है।
proxy.js use करें या next.config redirects?
Fixed पुराने-से-नए URL pairs के लिए next.config में redirects() use करें। proxy.js तब use करें जब फ़ैसले में logic हो: cookies, headers, patterns या geography।
