Update middleware query hydration handling

packages/next/build/webpack-config.ts

@@ -253,6 +253,9 @@ export function getDefineEnv({
     'process.env.__NEXT_I18N_SUPPORT': JSON.stringify(!!config.i18n),
     'process.env.__NEXT_I18N_DOMAINS': JSON.stringify(config.i18n?.domains),
     'process.env.__NEXT_ANALYTICS_ID': JSON.stringify(config.analyticsId),
+    'process.env.__NEXT_ALLOW_MIDDLEWARE_RESPONSE_BODY': JSON.stringify(
+      config.experimental.dangerouslyAllowMiddlewareResponseBody
+    ),
     'process.env.__NEXT_NO_MIDDLEWARE_URL_NORMALIZE': JSON.stringify(
       config.experimental.skipMiddlewareUrlNormalize
     ),
@@ -1909,6 +1912,8 @@ export default async function getBaseWebpackConfig(
           dev,
           sriEnabled: !dev && !!config.experimental.sri?.algorithm,
           hasFontLoaders: !!config.experimental.fontLoaders,
+          dangerouslyAllowMiddlewareResponseBody:
+            !!config.experimental.dangerouslyAllowMiddlewareResponseBody,
         }),
       isClient &&
         new BuildManifestPlugin({

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -340,12 +340,14 @@ function getCodeAnalyzer(params: {
   dev: boolean
   compiler: webpack.Compiler
   compilation: webpack.Compilation
+  dangerouslyAllowMiddlewareResponseBody: boolean
 }) {
   return (parser: webpack.javascript.JavascriptParser) => {
     const {
       dev,
       compiler: { webpack: wp },
       compilation,
+      dangerouslyAllowMiddlewareResponseBody,
     } = params
     const { hooks } = parser
 
@@ -560,8 +562,11 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`,
         .for(`${prefix}WebAssembly.instantiate`)
         .tap(NAME, handleWrapWasmInstantiateExpression)
     }
-    hooks.new.for('Response').tap(NAME, handleNewResponseExpression)
-    hooks.new.for('NextResponse').tap(NAME, handleNewResponseExpression)
+
+    if (!dangerouslyAllowMiddlewareResponseBody) {
+      hooks.new.for('Response').tap(NAME, handleNewResponseExpression)
+      hooks.new.for('NextResponse').tap(NAME, handleNewResponseExpression)
+    }
     hooks.callMemberChain.for('process').tap(NAME, handleCallMemberChain)
     hooks.expressionMemberChain.for('process').tap(NAME, handleCallMemberChain)
     hooks.importCall.tap(NAME, handleImport)
@@ -801,19 +806,24 @@ export default class MiddlewarePlugin {
   private readonly dev: boolean
   private readonly sriEnabled: boolean
   private readonly hasFontLoaders: boolean
+  private readonly dangerouslyAllowMiddlewareResponseBody: boolean
 
   constructor({
     dev,
     sriEnabled,
     hasFontLoaders,
+    dangerouslyAllowMiddlewareResponseBody,
   }: {
     dev: boolean
     sriEnabled: boolean
     hasFontLoaders: boolean
+    dangerouslyAllowMiddlewareResponseBody: boolean
   }) {
     this.dev = dev
     this.sriEnabled = sriEnabled
     this.hasFontLoaders = hasFontLoaders
+    this.dangerouslyAllowMiddlewareResponseBody =
+      dangerouslyAllowMiddlewareResponseBody
   }
 
   public apply(compiler: webpack.Compiler) {
@@ -826,6 +836,8 @@ export default class MiddlewarePlugin {
         dev: this.dev,
         compiler,
         compilation,
+        dangerouslyAllowMiddlewareResponseBody:
+          this.dangerouslyAllowMiddlewareResponseBody,
       })
       hooks.parser.for('javascript/auto').tap(NAME, codeAnalyzer)
       hooks.parser.for('javascript/dynamic').tap(NAME, codeAnalyzer)

packages/next/server/config-schema.ts

@@ -268,6 +268,9 @@ const configSchema = {
         appDir: {
           type: 'boolean',
         },
+        dangerouslyAllowMiddlewareResponseBody: {
+          type: 'boolean',
+        },
         externalDir: {
           type: 'boolean',
         },
@@ -323,12 +326,6 @@ const configSchema = {
         optimisticClientCache: {
           type: 'boolean',
         },
-        serverComponentsExternalPackages: {
-          items: {
-            type: 'string',
-          },
-          type: 'array',
-        },
         outputFileTracingRoot: {
           minLength: 1,
           type: 'string',
@@ -348,6 +345,12 @@ const configSchema = {
           enum: ['experimental-edge', 'nodejs'] as any,
           type: 'string',
         },
+        serverComponentsExternalPackages: {
+          items: {
+            type: 'string',
+          },
+          type: 'array',
+        },
         scrollRestoration: {
           type: 'boolean',
         },

packages/next/server/config-shared.ts

@@ -79,6 +79,7 @@ export interface NextJsWebpackConfig {
 }
 
 export interface ExperimentalConfig {
+  dangerouslyAllowMiddlewareResponseBody?: boolean
   skipMiddlewareUrlNormalize?: boolean
   skipTrailingSlashRedirect?: boolean
   optimisticClientCache?: boolean

packages/next/server/web/adapter.ts

@@ -186,6 +186,10 @@ export async function adapter(params: {
 export function blockUnallowedResponse(
   promise: Promise<FetchEventResult>
 ): Promise<FetchEventResult> {
+  if (process.env.__NEXT_ALLOW_MIDDLEWARE_RESPONSE_BODY) {
+    return promise
+  }
+
   return promise.then((result) => {
     if (result.response?.body) {
       console.error(

packages/next/shared/lib/router/router.ts

@@ -1187,7 +1187,7 @@ export default class Router implements BaseRouter {
     // hydration. Your app should _never_ use this property. It may change at
     // any time without notice.
     const isQueryUpdating = (options as any)._h
-    const shouldResolveHref =
+    let shouldResolveHref =
       isQueryUpdating ||
       (options as any)._shouldResolveHref ||
       parsePath(url).pathname === parsePath(as).pathname
@@ -1418,6 +1418,10 @@ export default class Router implements BaseRouter {
       pathname = this.pathname
     }
 
+    if (isQueryUpdating && isMiddlewareMatch) {
+      shouldResolveHref = false
+    }
+
     if (shouldResolveHref && pathname !== '/_error') {
       ;(options as any)._shouldResolveHref = true
 
@@ -1955,12 +1959,14 @@ export default class Router implements BaseRouter {
         isBackground: isQueryUpdating,
       }
 
-      const data = await withMiddlewareEffects({
-        fetchData: () => fetchNextData(fetchNextDataParams),
-        asPath: resolvedAs,
-        locale: locale,
-        router: this,
-      })
+      const data = isQueryUpdating
+        ? ({} as any)
+        : await withMiddlewareEffects({
+            fetchData: () => fetchNextData(fetchNextDataParams),
+            asPath: resolvedAs,
+            locale: locale,
+            router: this,
+          })
 
       if (isQueryUpdating && data) {
         data.json = self.__NEXT_DATA__.props
@@ -2079,7 +2085,8 @@ export default class Router implements BaseRouter {
       if (
         !this.isPreview &&
         routeInfo.__N_SSG &&
-        process.env.NODE_ENV !== 'development'
+        process.env.NODE_ENV !== 'development' &&
+        !isQueryUpdating
       ) {
         fetchNextData(
           Object.assign({}, fetchNextDataParams, {

test/e2e/middleware-general/test/index.test.ts

@@ -224,14 +224,13 @@ describe('Middleware Runtime', () => {
 
       await check(
         () => browser.eval('document.documentElement.innerHTML'),
-        /"from":"middleware"/
+        /"slug":"hello"/
       )
 
       await check(() => browser.elementByCss('body').text(), /\/to-ssg/)
 
       expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
         slug: 'hello',
-        from: 'middleware',
       })
       expect(
         JSON.parse(await browser.elementByCss('#props').text()).params

test/e2e/middleware-trailing-slash/test/index.test.ts

@@ -121,7 +121,6 @@ describe('Middleware Runtime trailing slash', () => {
 
       expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
         slug: 'hello',
-        from: 'middleware',
       })
       expect(
         JSON.parse(await browser.elementByCss('#props').text()).params

test/e2e/skip-trailing-slash-redirect/app/middleware.js

@@ -23,5 +23,13 @@ export default function handler(req) {
     return res
   }
 
+  if (req.nextUrl.pathname === '/middleware-response-body') {
+    return new Response('hello from middleware', {
+      headers: {
+        'x-from-middleware': 'true',
+      },
+    })
+  }
+
   return NextResponse.next()
 }

test/e2e/skip-trailing-slash-redirect/app/next.config.js

@@ -0,0 +1,27 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    skipTrailingSlashRedirect: true,
+    skipMiddlewareUrlNormalize: true,
+    dangerouslyAllowMiddlewareResponseBody: true,
+  },
+  async redirects() {
+    return [
+      {
+        source: '/redirect-me',
+        destination: '/another',
+        permanent: false,
+      },
+    ]
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/rewrite-me',
+        destination: '/another',
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig

test/e2e/skip-trailing-slash-redirect/index.test.ts

@@ -11,33 +11,17 @@ describe('skip-trailing-slash-redirect', () => {
     next = await createNext({
       files: new FileRef(join(__dirname, 'app')),
       dependencies: {},
-      nextConfig: {
-        experimental: {
-          skipTrailingSlashRedirect: true,
-          skipMiddlewareUrlNormalize: true,
-        },
-        async redirects() {
-          return [
-            {
-              source: '/redirect-me',
-              destination: '/another',
-              permanent: false,
-            },
-          ]
-        },
-        async rewrites() {
-          return [
-            {
-              source: '/rewrite-me',
-              destination: '/another',
-            },
-          ]
-        },
-      },
     })
   })
   afterAll(() => next.destroy())
 
+  it('should allow response body from middleware with flag', async () => {
+    const res = await fetchViaHTTP(next.url, '/middleware-response-body')
+    expect(res.status).toBe(200)
+    expect(res.headers.get('x-from-middleware')).toBe('true')
+    expect(await res.text()).toBe('hello from middleware')
+  })
+
   it('should merge cookies from middleware and API routes correctly', async () => {
     const res = await fetchViaHTTP(next.url, '/api/test-cookie', undefined, {
       redirect: 'manual',

test/integration/dynamic-routing/test/index.test.js

@@ -47,11 +47,6 @@ function runTests({ dev, serverless }) {
 
       const cacheKeys = await getCacheKeys()
       expect(cacheKeys).toEqual([
-        ...(process.env.__MIDDLEWARE_TEST
-          ? // data route is fetched with middleware due to query hydration
-            // since middleware matches the index route
-            ['/_next/data/BUILD_ID/index.json']
-          : []),
         '/_next/data/BUILD_ID/p1/p2/all-ssg/hello.json?rest=hello',
         '/_next/data/BUILD_ID/p1/p2/all-ssg/hello1/hello2.json?rest=hello1&rest=hello2',
         '/_next/data/BUILD_ID/p1/p2/nested-all-ssg/hello.json?rest=hello',
@@ -97,7 +92,14 @@ function runTests({ dev, serverless }) {
         await browser.waitForElementByCss(linkSelector)
       }
       const newCacheKeys = await getCacheKeys()
-      expect(newCacheKeys).toEqual(cacheKeys)
+      expect(newCacheKeys).toEqual([
+        ...(process.env.__MIDDLEWARE_TEST
+          ? // data route is fetched with middleware due to query hydration
+            // since middleware matches the index route
+            ['/_next/data/BUILD_ID/index.json']
+          : []),
+        ...cacheKeys,
+      ])
     })
   }
 

test/integration/middleware-prefetch/tests/index.test.js

@@ -3,7 +3,6 @@
 import { join } from 'path'
 import fs from 'fs-extra'
 import webdriver from 'next-webdriver'
-import assert from 'assert'
 import { check, findPort, killApp, nextBuild, nextStart } from 'next-test-utils'
 
 jest.setTimeout(1000 * 60 * 2)
@@ -62,19 +61,6 @@ describe('Middleware Production Prefetch', () => {
     }, 'yes')
   })
 
-  it(`prefetches data when it is ssg`, async () => {
-    const browser = await webdriver(context.appPort, `/`)
-    await browser.elementByCss('#made-up-link').moveTo()
-    await check(async () => {
-      const hrefs = await browser.eval(`Object.keys(window.next.router.sdc)`)
-      const mapped = hrefs.map((href) =>
-        new URL(href).pathname.replace(/^\/_next\/data\/[^/]+/, '')
-      )
-      assert.deepEqual(mapped, ['/index.json'])
-      return 'yes'
-    }, 'yes')
-  })
-
   it(`prefetches provided path even if it will be rewritten`, async () => {
     const browser = await webdriver(context.appPort, `/`)
     await browser.elementByCss('#ssg-page-2').moveTo()