Allow request body to be read in each interceptor

Author: unstubbable

packages/next/src/server/app-render/create-interceptor.ts

@@ -80,7 +80,10 @@ export async function createInterceptor(
     }
 
     if (!interceptorPromise) {
-      interceptorPromise = interceptRequest(request)
+      // We need to ensure that every interceptor gets a fresh request clone, so
+      // that it can consume the request body without affecting subsequent
+      // inteceptors, a route handler, or an action handler.
+      interceptorPromise = interceptRequest(request.clone())
     }
 
     return interceptorPromise

packages/next/src/server/async-storage/with-request-store.ts

@@ -7,7 +7,7 @@ import type {
 } from '../../server/app-render/work-unit-async-storage.external'
 import type { RenderOpts } from '../app-render/types'
 import type { WithStore } from './with-store'
-import { NextRequest } from '../web/spec-extension/request'
+import { isNextRequest, type NextRequest } from '../web/spec-extension/request'
 import type { __ApiPreviewProps } from '../api-utils'
 
 import { FLIGHT_HEADERS } from '../../client/components/app-router-headers'
@@ -134,15 +134,14 @@ export const withRequestStore: WithStore<WorkUnitStore, RequestContext> = <
     draftMode?: DraftModeProvider
   } = {}
 
-  const nextRequest =
-    req instanceof NextRequest
-      ? req
-      : NextRequestAdapter.fromBaseNextRequest(
-          req,
-          res && isNodeNextResponse(res)
-            ? signalFromNodeResponse(res.destination)
-            : undefined
-        )
+  const nextRequest = isNextRequest(req)
+    ? req
+    : NextRequestAdapter.fromBaseNextRequest(
+        req,
+        res && isNodeNextResponse(res)
+          ? signalFromNodeResponse(res.destination)
+          : undefined
+      )
 
   const store: RequestStore = {
     type: 'request',

packages/next/src/server/route-modules/app-route/module.ts

@@ -938,17 +938,7 @@ function proxyNextRequest(request: NextRequest, workStore: WorkStore) {
           return (
             target[requestCloneSymbol] ||
             (target[requestCloneSymbol] = () =>
-              new Proxy(
-                // This is vaguely unsafe but it's required since NextRequest does not implement
-                // clone. The reason we might expect this to work in this context is the Proxy will
-                // respond with static-amenable values anyway somewhat restoring the interface.
-                // @TODO we need to rethink NextRequest and NextURL because they are not sufficientlly
-                // sophisticated to adequately represent themselves in all contexts. A better approach is
-                // to probably embed the static generation logic into the class itself removing the need
-                // for any kind of proxying
-                target.clone() as NextRequest,
-                nextRequestHandlers
-              ))
+              new Proxy(target.clone(), nextRequestHandlers))
           )
         default:
           // The receiver arg is intentionally the same as the target to fix an issue with

packages/next/src/server/web/sandbox/context.ts

@@ -415,7 +415,7 @@ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation`),
               ? input.url
               : String(input)
           validateURL(url)
-          super(url, init)
+          super(input, init)
           this.next = init?.next
         }
       }

packages/next/src/server/web/spec-extension/adapters/next-request.ts

@@ -86,7 +86,7 @@ export class NextRequestAdapter {
     let body: BodyInit | null = null
     if (request.method !== 'GET' && request.method !== 'HEAD' && request.body) {
       // @ts-expect-error - this is handled by undici, when streams/web land use it instead
-      body = request.body
+      body = getRequestMeta(request, 'clonableBody')?.cloneBodyStream()
     }
 
     return new NextRequest(createUrl(request, { isEdge: false }), {

packages/next/src/server/web/spec-extension/request.ts

@@ -3,6 +3,7 @@ import { NextURL } from '../next-url'
 import { toNodeOutgoingHttpHeaders, validateURL } from '../utils'
 import { RemovedUAError, RemovedPageError } from '../error'
 import { RequestCookies } from './cookies'
+import type { BaseNextRequest } from '../../base-http'
 
 export const INTERNALS = Symbol('internal request')
 
@@ -22,7 +23,7 @@ export class NextRequest extends Request {
     const url =
       typeof input !== 'string' && 'url' in input ? input.url : String(input)
     validateURL(url)
-    if (input instanceof Request) super(input, init)
+    if (typeof input === 'object') super(input, init)
     else super(url, init)
     const nextUrl = new NextURL(url, {
       headers: toNodeOutgoingHttpHeaders(this.headers),
@@ -88,6 +89,10 @@ export class NextRequest extends Request {
   public get url() {
     return this[INTERNALS].url
   }
+
+  public clone() {
+    return new NextRequest(super.clone())
+  }
 }
 
 export interface RequestInit extends globalThis.RequestInit {
@@ -98,3 +103,14 @@ export interface RequestInit extends globalThis.RequestInit {
   }
   signal?: AbortSignal
 }
+
+/**
+ * When `NextRequest` is used accross bundle boundaries, an `instanceof` check
+ * will not work. Instead, this helper function can be used to discriminate
+ * between `NextRequest` and `BaseNextRequest`.
+ */
+export function isNextRequest(
+  req: NextRequest | BaseNextRequest
+): req is NextRequest {
+  return 'nextUrl' in req
+}

test/e2e/app-dir/interceptors/app/@slot/action/interceptor.ts

@@ -1,8 +1,19 @@
 import { NextRequest } from 'next/server'
 import { logWithTime, setTimeout } from '../../time-utils'
 
-export default async function interceptRoot(
+export default async function interceptSlot(
   request: NextRequest
 ): Promise<void> {
-  await logWithTime('SlotInterceptor', () => setTimeout(500))
+  await logWithTime('SlotInterceptor', async () => {
+    if (
+      request.method === 'POST' &&
+      request.headers.get('content-type').startsWith('multipart/form-data')
+    ) {
+      // Consume the request body to ensure this doesn't break when also
+      // consumed in the action handler.
+      await request.formData()
+    }
+
+    await setTimeout(500)
+  })
 }

test/e2e/app-dir/interceptors/app/api/interceptor.ts

@@ -4,5 +4,13 @@ import { logWithTime } from '../time-utils'
 export default async function interceptRoot(
   request: NextRequest
 ): Promise<void> {
-  await logWithTime('ApiInterceptor', () => Promise.resolve())
+  await logWithTime('ApiInterceptor', async () => {
+    if (request.method === 'POST') {
+      console.log(
+        'ApiInterceptor',
+        request.nextUrl.pathname,
+        await request.json()
+      )
+    }
+  })
 }

test/e2e/app-dir/interceptors/app/api/nested/interceptor.ts

@@ -4,5 +4,13 @@ import { logWithTime } from '../../time-utils'
 export default async function interceptRoot(
   request: NextRequest
 ): Promise<void> {
-  await logWithTime('ApiNestedInterceptor', () => Promise.resolve())
+  await logWithTime('ApiNestedInterceptor', async () => {
+    if (request.method === 'POST') {
+      console.log(
+        'ApiNestedInterceptor',
+        request.nextUrl.pathname,
+        await request.json()
+      )
+    }
+  })
 }

test/e2e/app-dir/interceptors/app/api/nested/route.ts

@@ -5,3 +5,9 @@ export async function GET(request: NextRequest) {
 
   return Response.json({ hello: 'world' })
 }
+
+export async function POST(request: NextRequest) {
+  console.log('POST', request.url, await request.json())
+
+  return Response.json({ hello: 'world' })
+}