I’m trying to understand the behavior of NextResponse.next() in Next.js middleware, but I’m having trouble grasping the exact process and the purpose of the generated response object.

In the given code snippet: (https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers)

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-hello-from-middleware1`
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-hello-from-middleware1', 'hello')
 
  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  })
 
  // Set a new response header `x-hello-from-middleware2`
  response.headers.set('x-hello-from-middleware2', 'hello')
  return response
}

1. What exactly does NextResponse.next() do?

2. When debugging and stepping through the code after calling next(), what is the ultimate purpose of the repeated “Step in” process? I’m unsure what this series of steps is intended to achieve.

3. If I have a page at /origin/login and this middleware is applied to the request, what information would the response object created in the middleware contain? I initially thought it might be using the return statement from the actual page.ts|js file to create the response, but that doesn’t seem to be the case.

I’d appreciate any clarification on how to understand the behavior and purpose of NextResponse.next() and the generated response object in the context of Next.js middleware.