opennextjs · pieh · Jun 17, 2025 · Jun 11, 2025 · Jun 11, 2025 · Jun 14, 2025
@@ -16,6 +16,7 @@ import { join as posixJoin, sep as posixSep } from 'node:path/posix'
 import { trace } from '@opentelemetry/api'
 import { wrapTracer } from '@opentelemetry/api/experimental'
 import glob from 'fast-glob'
+import type { MiddlewareManifest } from 'next/dist/build/webpack/plugins/middleware-plugin.js'
 import { prerelease, satisfies, lt as semverLowerThan, lte as semverLowerThanOrEqual } from 'semver'
 
 import type { RunConfig } from '../../run/config.js'
@@ -324,23 +325,44 @@ export const copyNextDependencies = async (ctx: PluginContext): Promise<void> =>
 }
 
 /**
- * Generates a copy of the middleware manifest without any middleware in it. We
+ * Generates a copy of the middleware manifest that make all matchers never match on anything. We
  * do this because we'll run middleware in an edge function, and we don't want
- * to run it again in the server handler.
+ * to run it again in the server handler. Additionally Next.js conditionally enable some handling
+ * depending if there is a middleware present, so we need to keep reference to middleware in server
+ * even if we don't actually want to ever run it there.
  */
 const replaceMiddlewareManifest = async (sourcePath: string, destPath: string) => {
   await mkdir(dirname(destPath), { recursive: true })
 
   const data = await readFile(sourcePath, 'utf8')
-  const manifest = JSON.parse(data)
+  const manifest = JSON.parse(data) as MiddlewareManifest
 
   // TODO: Check for `manifest.version` and write an error to the system log
   // when we find a value that is not equal to 2. This will alert us in case
   // Next.js starts using a new format for the manifest and we're writing
   // one with the old version.
   const newManifest = {
     ...manifest,
-    middleware: {},
+    middleware: Object.fromEntries(
+      Object.entries(manifest.middleware).map(([key, edgeFunctionDefinition]) => {
+        return [
+          key,
+          {
+            ...edgeFunctionDefinition,
+            matchers: edgeFunctionDefinition.matchers.map((matcher) => {
+              return {
+                ...matcher,
+                // matcher that won't match on anything
+                // this is meant to disable actually running middleware in the server handler,
+                // while still allowing next server to enable some middleware specific handling
+                // such as _next/data normalization ( https://github.com/vercel/next.js/blob/7bb72e508572237fe0d4aac5418546d4b4b3a363/packages/next/src/server/lib/router-utils/resolve-routes.ts#L395 )
+                regexp: '(?!.*)',
+              }
+            }),
+          },
+        ]
+      }),
+    ),
   }
   const newData = JSON.stringify(newManifest)
 

@@ -3,6 +3,10 @@ import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
 import { test } from '../utils/playwright-helpers.js'
 import { getImageSize } from 'next/dist/server/image-optimizer.js'
 
+type ExtendedWindow = Window & {
+  didReload?: boolean
+}
+
 test('Runs edge middleware', async ({ page, middleware }) => {
   await page.goto(`${middleware.url}/test/redirect`)
 
@@ -53,21 +57,144 @@ test('it should render OpenGraph image meta tag correctly', async ({ page, middl
   expect([size.width, size.height]).toEqual([1200, 630])
 })
 
-test('json data rewrite works', async ({ middlewarePages }) => {
-  const response = await fetch(`${middlewarePages.url}/_next/data/build-id/sha.json`, {
-    headers: {
-      'x-nextjs-data': '1',
+test.describe('json data', () => {
+  const testConfigs = [
+    {
+      describeLabel: 'NextResponse.next() -> getServerSideProps page',
+      selector: 'NextResponse.next()#getServerSideProps',
+      jsonPathMatcher: '/link/next-getserversideprops.json',
     },
-  })
+    {
+      describeLabel: 'NextResponse.next() -> getStaticProps page',
+      selector: 'NextResponse.next()#getStaticProps',
+      jsonPathMatcher: '/link/next-getstaticprops.json',
+    },
+    {
+      describeLabel: 'NextResponse.next() -> fully static page',
+      selector: 'NextResponse.next()#fullyStatic',
+      jsonPathMatcher: '/link/next-fullystatic.json',
+    },
+    {
+      describeLabel: 'NextResponse.rewrite() -> getServerSideProps page',
+      selector: 'NextResponse.rewrite()#getServerSideProps',
+      jsonPathMatcher: '/link/rewrite-me-getserversideprops.json',
+    },
+    {
+      describeLabel: 'NextResponse.rewrite() -> getStaticProps page',
+      selector: 'NextResponse.rewrite()#getStaticProps',
+      jsonPathMatcher: '/link/rewrite-me-getstaticprops.json',
+    },
+  ]
+
+  // Linking to static pages reloads on rewrite for versions below 14
+  if (nextVersionSatisfies('>=14.0.0')) {
+    testConfigs.push({
+      describeLabel: 'NextResponse.rewrite() -> fully static page',
+      selector: 'NextResponse.rewrite()#fullyStatic',
+      jsonPathMatcher: '/link/rewrite-me-fullystatic.json',
+    })
+  }
+
+  test.describe('no 18n', () => {
+    for (const testConfig of testConfigs) {
+      test.describe(testConfig.describeLabel, () => {
+        test('json data fetch', async ({ middlewarePages, page }) => {
+          const dataFetchPromise = new Promise<Response>((resolve) => {
+            page.on('response', (response) => {
+              if (response.url().includes(testConfig.jsonPathMatcher)) {
+                resolve(response)
+              }
+            })
+          })
+
+          await page.goto(`${middlewarePages.url}/link`)
+
+          await page.hover(`[data-link="${testConfig.selector}"]`)
 
-  expect(response.ok).toBe(true)
-  const body = await response.text()
+          const dataResponse = await dataFetchPromise
 
-  expect(body).toMatch(/^{"pageProps":/)
+          expect(dataResponse.ok()).toBe(true)
+        })
 
-  const data = JSON.parse(body)
+        test('navigation', async ({ middlewarePages, page }) => {
+          await page.goto(`${middlewarePages.url}/link`)
 
-  expect(data.pageProps.message).toBeDefined()
+          await page.evaluate(() => {
+            // set some value to window to check later if browser did reload and lost this state
+            ;(window as ExtendedWindow).didReload = false
+          })
+
+          await page.click(`[data-link="${testConfig.selector}"]`)
+
+          // wait for page to be rendered
+          await page.waitForSelector(`[data-page="${testConfig.selector}"]`)
+
+          // check if browser navigation worked by checking if state was preserved
+          const browserNavigationWorked =
+            (await page.evaluate(() => {
+              return (window as ExtendedWindow).didReload
+            })) === false
+
+          // we expect client navigation to work without browser reload
+          expect(browserNavigationWorked).toBe(true)
+        })
+      })
+    }
+  })
+  test.describe('with 18n', () => {
+    for (const testConfig of testConfigs) {
+      test.describe(testConfig.describeLabel, () => {
+        for (const { localeLabel, pageWithLinksPathname } of [
+          { localeLabel: 'implicit default locale', pageWithLinksPathname: '/link' },
+          { localeLabel: 'explicit default locale', pageWithLinksPathname: '/en/link' },
+          { localeLabel: 'explicit non-default locale', pageWithLinksPathname: '/fr/link' },
+        ]) {
+          test.describe(localeLabel, () => {
+            test('json data fetch', async ({ middlewareI18n, page }) => {
+              const dataFetchPromise = new Promise<Response>((resolve) => {
+                page.on('response', (response) => {
+                  if (response.url().includes(testConfig.jsonPathMatcher)) {
+                    resolve(response)
+                  }
+                })
+              })
+
+              await page.goto(`${middlewareI18n.url}${pageWithLinksPathname}`)
+
+              await page.hover(`[data-link="${testConfig.selector}"]`)
+
+              const dataResponse = await dataFetchPromise
+
+              expect(dataResponse.ok()).toBe(true)
+            })
+
+            test('navigation', async ({ middlewareI18n, page }) => {
+              await page.goto(`${middlewareI18n.url}${pageWithLinksPathname}`)
+
+              await page.evaluate(() => {
+                // set some value to window to check later if browser did reload and lost this state
+                ;(window as ExtendedWindow).didReload = false
+              })
+
+              await page.click(`[data-link="${testConfig.selector}"]`)
+
+              // wait for page to be rendered
+              await page.waitForSelector(`[data-page="${testConfig.selector}"]`)
+
+              // check if browser navigation worked by checking if state was preserved
+              const browserNavigationWorked =
+                (await page.evaluate(() => {
+                  return (window as ExtendedWindow).didReload
+                })) === false
+
+              // we expect client navigation to work without browser reload
+              expect(browserNavigationWorked).toBe(true)
+            })
+          })
+        }
+      })
+    }
+  })
 })
 
 // those tests use `fetch` instead of `page.goto` intentionally to avoid potential client rendering

@@ -8,6 +8,26 @@ export async function middleware(request) {
     return NextResponse.next()
   }
 
+  if (url.pathname.startsWith('/link/next')) {
+    return NextResponse.next({
+      headers: {
+        'x-middleware-test': 'link-next',
+      },
+    })
+  }
+
+  if (url.pathname.startsWith('/link/rewrite-me')) {
+    const rewriteUrl = new URL(
+      url.pathname.replace('/link/rewrite-me', '/link/rewrite-target'),
+      url,
+    )
+    return NextResponse.rewrite(rewriteUrl, {
+      headers: {
+        'x-middleware-test': 'link-rewrite',
+      },
+    })
+  }
+
   if (url.pathname === '/old-home') {
     if (url.searchParams.get('override') === 'external') {
       return Response.redirect('https://example.vercel.sh')

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Page with Links</h1>
+      <ul>
+        <li>
+          NextResponse.next()
+          <ul>
+            <li>
+              <Link
+                href="/link/next-getserversideprops"
+                data-link="NextResponse.next()#getServerSideProps"
+              >
+                getServerSideProps
+              </Link>
+            </li>
+
+            <li>
+              <Link href="/link/next-getstaticprops" data-link="NextResponse.next()#getStaticProps">
+                getStaticProps
+              </Link>
+            </li>
+
+            <li>
+              <Link href="/link/next-fullystatic" data-link="NextResponse.next()#fullyStatic">
+                fullyStatic
+              </Link>
+            </li>
+          </ul>
+        </li>
+        <li>
+          NextResponse.rewrite()
+          <ul>
+            <li>
+              <Link
+                href="/link/rewrite-me-getserversideprops"
+                data-link="NextResponse.rewrite()#getServerSideProps"
+              >
+                getServerSideProps
+              </Link>
+            </li>
+
+            <li>
+              <Link
+                href="/link/rewrite-me-getstaticprops"
+                data-link="NextResponse.rewrite()#getStaticProps"
+              >
+                getStaticProps
+              </Link>
+            </li>
+
+            <li>
+              <Link
+                href="/link/rewrite-me-fullystatic"
+                data-link="NextResponse.rewrite()#fullyStatic"
+              >
+                fullyStatic
+              </Link>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  )
+}
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.next()#fullyStatic">
+      <h1>fully static page</h1>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.next()#getServerSideProps">
+      <h1>
+        <code>getServerSideProps</code> page
+      </h1>
+    </div>
+  )
+}
+
+export function getServerSideProps() {
+  return {
+    props: {},
+  }
+}
@@ -0,0 +1,15 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.next()#getStaticProps">
+      <h1>
+        <code>getStaticProps</code> page
+      </h1>
+    </div>
+  )
+}
+
+export function getStaticProps() {
+  return {
+    props: {},
+  }
+}
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.rewrite()#fullyStatic">
+      <h1>fully static page</h1>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.rewrite()#getServerSideProps">
+      <h1>
+        <code>getServerSideProps</code> page
+      </h1>
+    </div>
+  )
+}
+
+export function getServerSideProps() {
+  return {
+    props: {},
+  }
+}
@@ -0,0 +1,15 @@
+export default function Page() {
+  return (
+    <div data-page="NextResponse.rewrite()#getStaticProps">
+      <h1>
+        <code>getStaticProps</code> page
+      </h1>
+    </div>
+  )
+}
+
+export function getStaticProps() {
+  return {
+    props: {},
+  }
+}