# Next.js 16 Middleware u 2026: Edge Runtime, Avtentyfikatsiia ta Pytannia na Spivbesidi

> Kompleksnyi posibnyk z Next.js 16 Middleware: Edge Runtime, paterny avtentyfikatsii ta pytannia na spivbesidi.

- Published: 2026-09-20
- Updated: 2026-09-20
- Author: Anthony Fillion-Maillet
- Reading time: 5 min

---

Next.js 16 Middleware vykonuietsia pered kozhnym zapytom do servera, stvoriuiuchy pershu liniiu zakhystu dlia avtentyfikatsii, lokalizatsii ta manipuliatsii zapytamy. Rozuminnia middleware ye kliuchovym dlia stvorennia production-dodatkiv i chasto zustrichaietsla na spivbesidakh dlia frontend-rozrobnykiv.

> **Middleware pratsiuie na Edge**
>
> Next.js 16 Middleware za zamovchuvanniiam vykonuietsia v Edge Runtime, shcho oznachaie robotu v data-tsentrakh blyzko do korystuvachiv z chasom kholodnoho startu mensh nizh milisekunda. Tse robyt yoho idealnym dlia perevirok avtentyfikatsii ta perespriamuvan, yaki povynni vidbutysia do renderynhu storinky.

## Yak pratsiuie Next.js 16 Middleware pid kapotom

Middleware v Next.js 16 perekhopliuie zapyty do togo, yak vony dosiahnut route handler abo komponentu storinky. Fail middleware maie buty rozmishchenyi u korenevii papki proektu (poruich z `app/` abo `pages/`) i eksportuvaty funktsiu za zamovchuvanniiam, yaka otrymyie obiekt `NextRequest`.

Obmezhennia Edge Runtime oznachaie, shcho middleware ne mozhe vykorystovuvaty Node.js API, taki yak `fs` abo `Buffer`. Vin pratsiuie na V8 izoliatsiiakh, podibno do Cloudflare Workers, shcho zabezpechuie hlobalnu dystrybutsiiu, ale obmezhuie dostupni API do Web Standards.

```typescript
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Access request headers, cookies, and URL
  const token = request.cookies.get('session')?.value
  const pathname = request.nextUrl.pathname

  // Log for debugging (visible in Vercel logs)
  console.log(`Middleware: ${request.method} ${pathname}`)

  // Continue to the route handler
  return NextResponse.next()
}

// Configure which paths trigger middleware
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}
```

Konfiguratsiia `matcher` vykorystovuie regex-podibny syntaksys dlia vyznachennia, yaki shliakhy zapuskaiut middleware. Bez neii middleware pratsiuie na kozhnomu zapyti, vkliuchaiuchy statychni resursy.

## Paterny avtentyfikatsii z Next.js Middleware

Middleware vidminno pratsiye dlia avtentyfikatsii, oskilky vykonuietsia do zapusku bud-yakoho kodu storinky. Korystuvach bez diisnoii sesii nikoly ne pobachyt zakhyshchenyi vmist, navit na myt. Tse vidrizniaietsia vid perevirok auth na storontsi klienta, yaki mozhut korotko pokazaty zakhyshchenyi vmist pered perespriamuvanniiam.

Nastupnyi patern validiuie token sesii i perespriamoviuie neautentyfikovanykh korystuvachiv. Vin intehruietsia z bud-yakym provaideron auth, yakyi zberihaye dani sesii v cookies abo headerakh.

```typescript
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const protectedPaths = ['/dashboard', '/settings', '/profile']
const authPaths = ['/login', '/signup']

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  const sessionToken = request.cookies.get('session')?.value

  // Check if path requires authentication
  const isProtectedPath = protectedPaths.some(path => 
    pathname.startsWith(path)
  )
  const isAuthPath = authPaths.some(path => 
    pathname.startsWith(path)
  )

  // Validate session token (call auth service)
  const isValidSession = sessionToken 
    ? await validateSession(sessionToken)
    : false

  // Redirect unauthenticated users to login
  if (isProtectedPath && !isValidSession) {
    const loginUrl = new URL('/login', request.url)
    loginUrl.searchParams.set('callbackUrl', pathname)
    return NextResponse.redirect(loginUrl)
  }

  // Redirect authenticated users away from auth pages
  if (isAuthPath && isValidSession) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }

  return NextResponse.next()
}

async function validateSession(token: string): Promise<boolean> {
  // Call auth API endpoint or decode JWT
  // Edge-compatible: use fetch, not Node.js crypto
  try {
    const response = await fetch('https://api.example.com/validate', {
      headers: { Authorization: `Bearer ${token}` },
    })
    return response.ok
  } catch {
    return false
  }
}
```

Parametr `callbackUrl` zberihaie pochatkove pryznachennia, tomu korystuvachi potraplyaiut na storinku, yaku vony spochatku zapytuvaly, pislia vkhodu.

## Vidpovidnist shliakhiv ta konfiguratsiia Matchera

Konfiguratsiia `matcher` vyznachaie, yaki zapyty zapuskaiut middleware. Nepravylna konfiguratsiia pryzvodyt do problem z produktyvnistiu (middleware pratsiuie na kozhnomu statychnomu resursi) abo vrazlyvostei bezpeky (zakhyshcheni shliakhy ne zapuskaiut perevirku auth).

Next.js 16 pidtrymuie try syntaksysy matchera: tekstovi shliakhy, paterny shliakhiv z parametramy ta regex-podibni paterny z nehatyvnymy lookaheadamy.

```typescript
// middleware.ts

// Option 1: Simple string paths
export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*'],
}

// Option 2: Exclude static assets with negative lookahead
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|public/).*)'],
}

// Option 3: Conditional matching with has/missing
export const config = {
  matcher: [
    {
      source: '/api/:path*',
      has: [{ type: 'header', key: 'Authorization' }],
    },
    {
      source: '/dashboard/:path*',
      missing: [{ type: 'cookie', key: 'session' }],
    },
  ],
}
```

Umovy `has` i `missing` v optsii 3 dodaiut lohiku shche do zapusku middleware. Tse efektyvnishe, nizh perevirka vseredyni funktsii middleware.

## Manipuliatsiia zapytamy ta vidpovidiamy v Middleware

Okrim avtentyfikatsii, middleware mozhe modyfikuvaty zapyty do dosiahnennia route handleriv ta vidpovidi do dosiahnennia klienta. Typovi vypadky vykorystannia vkliuchaiut dodavannia headeriv bezpeky, perepys URL dlia A/B testuvannia ta iniektsiiu danykh heolokatsii.

Klas `NextResponse` nadaie metody dlia kozhnoho typu modyfikatsii. Perepysy (rewrites) zminiuiut pryznachennia bez zminy URL u brauzeri, todi yak perespriamuvannia onovliuiut obydva.

```typescript
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // Add security headers to all responses
  response.headers.set('X-Frame-Options', 'DENY')
  response.headers.set('X-Content-Type-Options', 'nosniff')
  response.headers.set(
    'Referrer-Policy', 
    'strict-origin-when-cross-origin'
  )

  // Inject geolocation into request headers for route handlers
  const geo = request.geo
  if (geo?.country) {
    response.headers.set('x-user-country', geo.country)
    response.headers.set('x-user-city', geo.city ?? 'unknown')
  }

  return response
}
```

Dani heolokatsii (`request.geo`) zapovniuiutsia Vercel Edge Network. Self-hosted deployments povynni nalashutuvaty tse cherez hosting-provaidera abo vykorystovuvaty storonnii servislP-heolokatsii.

## Perepys URL dlia A/B testuvannia ta flahiv funktsii

Perepysy middleware dozvoliaiut servity rizni storinky na osnovi cookies, headeriv abo vypadvkovoho pryznachennia bez vidomosti klienta. Tsei patern pidtrymuie freimvorky A/B testuvannia ta postupove rozghortannia funktsii.

Perepys vidbuvaietsia na edge, tomu obydva varianty maiut odynakovyi URL i korystuilutsia edge-keshuvanniam, de tse dorechno.

```typescript
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  // Check for existing variant assignment
  let variant = request.cookies.get('ab-variant')?.value

  // Assign variant if not set (50/50 split)
  if (!variant && pathname === '/pricing') {
    variant = Math.random() < 0.5 ? 'control' : 'treatment'
    const response = NextResponse.rewrite(
      new URL(`/pricing/${variant}`, request.url)
    )
    response.cookies.set('ab-variant', variant, {
      maxAge: 60 * 60 * 24 * 30, // 30 days
      httpOnly: true,
    })
    return response
  }

  // Rewrite to assigned variant
  if (variant && pathname === '/pricing') {
    return NextResponse.rewrite(
      new URL(`/pricing/${variant}`, request.url)
    )
  }

  return NextResponse.next()
}
```

Cookie zberihaie pryznachennia varianta, zabezpechuiuchy, shcho korystuvachi bachyt tu samu versiiu pry povtornykh vidviduvannakh. 30-dennyi termin dii zbalansovuie uzgodzhenist eksperymentu z mozhlyvistiu pryznachyty korystuvachiv do novykh eksperymentiv.

## Obmezhennia Edge Runtime ta obkhidni shliakhy

Edge Runtime obminuie sumisnist z Node.js na hlobalnu dystributsiiu ta shvydki kholodni starty. Middleware ne mozhe importuvaty moduli, spetsyfichni dlia Node.js, shcho vplyvaye na biblioteky taki yak `bcrypt`, `jsonwebtoken` (pry vykorystanni RS256) ta klienty baz danykh na TCP-soketakh.

[Dokumentatsiia Edge Runtime Next.js](https://nextjs.org/docs/app/api-reference/edge) perelikuie pidtrymuvani API. Web Crypto, fetch i bilshist API veb-platformy pratsiuiut. Vazhki obchyslennia povynni perenosytysia v API routes, shcho pratsiuiut u Node.js.

```typescript
// middleware.ts - JWT validation without jsonwebtoken
import { jwtVerify } from 'jose' // Edge-compatible JWT library
import type { NextRequest } from 'next/server'

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)

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

  if (!token) {
    return redirectToLogin(request)
  }

  try {
    // jose library works in Edge Runtime
    const { payload } = await jwtVerify(token, JWT_SECRET)
    
    // Token is valid, check expiration
    if (payload.exp && payload.exp < Date.now() / 1000) {
      return redirectToLogin(request)
    }

    return NextResponse.next()
  } catch {
    // Invalid token signature or format
    return redirectToLogin(request)
  }
}

function redirectToLogin(request: NextRequest) {
  const url = new URL('/login', request.url)
  url.searchParams.set('callbackUrl', request.nextUrl.pathname)
  return NextResponse.redirect(url)
}
```

Biblioteka [jose](https://github.com/panva/jose) zabezpechuie Edge-sumisni operatsii JWT. Vona vykorystovuie Web Crypto pid kapotom, unykaiuchy modula `crypto` z Node.js.

## Poshyreni pytannia na spivbesidi pro Next.js Middleware

Interviuery zapytuiut pro middleware, shchob otsinyty rozuminnia zhyttievoho tsyklu zapytiv, paterniv bezpeky ta obmezhen Edge computing. Tsi pytannia zustrichaiutsia na senior frontend ta fullstack pozytsiiakh, shcho pratsiuiut z Next.js.

**De v zhytteovomu tsykli zapytu vykonuietsia middleware?**

Middleware pratsiuie pislia toho, yak zapyt dosiahne servera Next.js, ale do bud-yakoho zistanlennia z routamy abo renderyngu storinky. Na Vercel vin vykonuietsia na Edge, tobto v naiblychcjhomu data-tsentri do korystuvacha. Tse rozmishchennia robyt yoho idealnym dlia avtentyfikatsii ta perespriamuvan, oskilky nepravylni zapyty nikoly ne dosiahaiut origin servera.

**Choho middleware ne mozhe robyty v porivnianni z API routes?**

Middleware pratsiuie v Edge Runtime, a ne v Node.js. Vin ne mozhe vykorystovuvaty vbudovani moduli Node.js (`fs`, `path`, `crypto` z deiakymi alhorytmamy), klienty baz danykh na TCP abo npm-pakety, shcho zalezhat vid API Node.js. Vazhki obchyslennia povynni vidbuvdatysia v API routes abo Server Components.

**Yak obslughovuvaty avtentyfikatsiiu v middleware bez blokuvannia?**

Patern poliahaie v perevirci cookie sesii, validatsii yoho proty endpointu auth abo perevirki pidpysu JWT, i perespriamuvannia, yakshcho nediisnyi. Shchob unyknuty blokuvannia kozhnogo zapytu, sld vykorystovuvaty konfiguratsiiu `matcher`, shchob middleware pratsiuvav lyshe na zakhyshchenykh shliakhakh. Bezstanova validatsiia JWT ye shvydshoiu, nizh vyklyk zovnishnoho auth-servisu pry kozhnomu zapyti.

**Shcho vidbuvaietsia, koly middleware kydaie pomylku?**

Neobrobena pomylka v middleware povertaie vidpovid 500 klientovi. Storinka nikoly ne renderytsia. Ohornutia loghiky middleware v try-catch i povernennia fallback vidpovidi (chasto `NextResponse.next()`) zapobighaie povnym zboiam zapytiv. Lohuvannia pomylky pered prodovzhenniam dopomahaie v vidbahuvanni.

Dlia hlybshoi praktyky z tsymy kontseptsiiamy, modul [pytan na spivbesidi pro Next.js Middleware ta Auth](/technologies/react-next/interview-questions/nextjs-middleware-auth) okhopliuie dodatkovi stsenarii.

## Vidbahuvnnia Middleware v Development ta Production

Pomylky v middleware vazhko znaity, oskilky kod pratsiuie na edge, a ne v DevTools brauzera. Rezhym development pokazuie lohy middleware v terminali, ale production vymahaie nalezhnoii infrastruktury lohuvannia.

Nastupnyi pidkhid lohuie vykonannia middleware z dostatnim kontekstom dlia vidbahudannia problem bez rozkryttia chutlyvykh danykh.

```typescript
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const start = Date.now()
  const requestId = crypto.randomUUID()

  // Log request start
  console.log(JSON.stringify({
    type: 'middleware_request',
    requestId,
    method: request.method,
    path: request.nextUrl.pathname,
    userAgent: request.headers.get('user-agent')?.slice(0, 100),
    country: request.geo?.country,
  }))

  // Process request
  const response = processRequest(request)

  // Log completion
  console.log(JSON.stringify({
    type: 'middleware_response',
    requestId,
    duration: Date.now() - start,
    status: response.status,
  }))

  // Pass request ID to route handlers
  response.headers.set('x-request-id', requestId)
  return response
}

function processRequest(request: NextRequest): NextResponse {
  // Middleware logic here
  return NextResponse.next()
}
```

Na Vercel tsi lohy ziavliaiutsia na vkladtsi Functions. Self-hosted deployments povynni nadsilaty lohy do servisu na kshtalt Datadog abo vykorystovuvaty strukturovane lohuvannia, yake hosting platforma mozhe obroblyaty.

## Naykrashchi praktyky produktyvnosti Middleware

Middleware pratsiuie na kozhnomu vidpovidnomu zapyti. Povilna funktsiia middleware dodaie zatrymku do kozhnogo zavantazhennia storinky. Meta - zavershyty vykonannia middleware za mensh nizh 5ms dlia bilshosti zapytiv.

- **Minimizuite async operatsii**: Kozhen `await` dodaie zatrymku. De mozhllyvo, keshuite rezultaty validatsii.
- **Vykorystovuite konfiguratsiiu matcher**: Vykluchit statychni resursy ta publichni shliakhy, yaki ne potrebuiut loghiky middleware.
- **Unykakte zovnishnikh vyklykiv pry kozhnomu zapyti**: Validuite JWT lokalno zamist vyklyku auth-servisu. De dorechno, keshuite rezultaty v cookies.
- **Trymajte bundle malym**: Middleware maie vlasnyi limit rozmiiru bundle (1MB na Vercel). Importuite lyshe neobkhidne.

Storinka tekhnolohii React Next.js za adresoiu [/technologies/react-next](/technologies/react-next) okhopliuie poviazani kontseptsii, taki yak Server Components ta paterny otrymannia danykh, shcho dopovniuiut znannia pro middleware.

## Chek-lyst Next.js 16 Middleware dlia production

- Rozmistit middleware v koreni proektu yak `middleware.ts`, a ne vseredyni `app/` chy `pages/`
- Nalashituite `matcher`, shchob vykluchyty `_next/static`, `_next/image` ta publichni resursy z vykonannia middleware
- Vykorystovuite Edge-sumisni biblioteky dlia validatsii JWT, taki yak `jose` zamist `jsonwebtoken`
- Zberihaite callback URL v parametrakh query pry perespriamuvannia na vkhid, shchob korystuvachi povertalysia do zamyslenoho pryznachennia
- Dodavaite headery bezpeky v middleware dlia poslidovnoho zastosuvannia na vsikh marshrutakh
- Lohuite vykonannia middleware z ID zapytiv, shchob vidstezhuvaty zapyty cherez systemu
- Zmenshuite zovnishni vyklyky API do minimumu, validuiuchy tokeny lokalno ta keshuiuchy dani korystuvacha v pidpysanykh cookies

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/blog/react-next/nextjs-16-middleware-edge-runtime-authentication-interview-questions