Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🟣 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 में यह कहाँ चलता है

BrowserGET /course/cproxy.jsफ़ैसलाredirect / rewriteया next()app/ routepage render
proxy हर matched route के आगे बैठता है

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 के लिए
Redirect vs rewrite

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 जोड़ें।
  • हमेशा matcher set करें और 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।
← Next.js Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicEnvironment Variables और next.config आपकी प्रगति: 25 / 37 (68%) · Lesson 26 / 37 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें