From 9d1e94d56d4d3ad8ff0119192733b760fe8752ad Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <accounts+github@wyattjoh.ca>
Date: Wed, 16 Jul 2025 13:25:12 -0600
Subject: [PATCH 1/7] fix: revert client segment route changes for sub shell
 generation (#81731)

Reverts changes to the `routes-manifest.json` from #81321. Incorrect
route sorting was causing some routing errors.
---
 packages/next/src/build/index.ts              | 34 +++----------------
 .../sub-shell-generation.test.ts              |  2 ++
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/next/src/build/index.ts b/packages/next/src/build/index.ts
index c203498fa7824..4a34ad711c336 100644
--- a/packages/next/src/build/index.ts
+++ b/packages/next/src/build/index.ts
@@ -3103,44 +3103,18 @@ export default async function build(
                 }
 
                 let prefetchDataRoute: string | undefined
-                let dynamicRoute = routesManifest.dynamicRoutes.find(
-                  (r) => r.page === route.pathname
-                )
                 if (!isAppRouteHandler && isAppPPREnabled) {
                   prefetchDataRoute = path.posix.join(
                     `${normalizedRoute}${RSC_PREFETCH_SUFFIX}`
                   )
-
-                  // If the dynamic route wasn't found, then we need to create
-                  // it. This ensures that for each fallback shell there's an
-                  // entry in the app routes manifest which enables routing for
-                  // this fallback shell.
-                  if (!dynamicRoute) {
-                    dynamicRoute = pageToRoute(route.pathname)
-
-                    // This route is not for the internal router, but instead
-                    // for external routers.
-                    dynamicRoute.skipInternalRouting = true
-
-                    // Push this to the end of the array. The dynamic routes are
-                    // sorted by page later.
-                    routesManifest.dynamicRoutes.push(dynamicRoute)
-                  }
                 }
 
                 if (!isAppRouteHandler && metadata?.segmentPaths) {
-                  // If PPR isn't enabled, then we might not find the dynamic
-                  // route by pathname. If that's the case, we need to find the
-                  // route by page.
+                  const dynamicRoute = routesManifest.dynamicRoutes.find(
+                    (r) => r.page === page
+                  )
                   if (!dynamicRoute) {
-                    dynamicRoute = routesManifest.dynamicRoutes.find(
-                      (r) => r.page === page
-                    )
-
-                    // If it can't be found by page, we must throw an error.
-                    if (!dynamicRoute) {
-                      throw new InvariantError('Dynamic route not found')
-                    }
+                    throw new InvariantError('Dynamic route not found')
                   }
 
                   dynamicRoute.prefetchSegmentDataRoutes ??= []
diff --git a/test/e2e/app-dir/sub-shell-generation/sub-shell-generation.test.ts b/test/e2e/app-dir/sub-shell-generation/sub-shell-generation.test.ts
index 4c02303e4a149..8f9c0b769c67b 100644
--- a/test/e2e/app-dir/sub-shell-generation/sub-shell-generation.test.ts
+++ b/test/e2e/app-dir/sub-shell-generation/sub-shell-generation.test.ts
@@ -4,6 +4,8 @@ import * as cheerio from 'cheerio'
 describe('sub-shell-generation', () => {
   const { next, isNextDev, isNextDeploy } = nextTestSetup({
     files: __dirname,
+    // FIXME: re-enable once we've re-enabled the sub-shell generation in Vercel
+    skipDeployment: true,
   })
 
   if (isNextDev) {

From 40d2fa9b5e578c71989251ad387214ffb2c1507f Mon Sep 17 00:00:00 2001
From: nextjs-bot <it+nextjs-bot@vercel.com>
Date: Wed, 16 Jul 2025 19:31:14 +0000
Subject: [PATCH 2/7] v15.4.2-canary.4

---
 lerna.json                                   |  2 +-
 packages/create-next-app/package.json        |  2 +-
 packages/eslint-config-next/package.json     |  4 ++--
 packages/eslint-plugin-internal/package.json |  2 +-
 packages/eslint-plugin-next/package.json     |  2 +-
 packages/font/package.json                   |  2 +-
 packages/next-bundle-analyzer/package.json   |  2 +-
 packages/next-codemod/package.json           |  2 +-
 packages/next-env/package.json               |  2 +-
 packages/next-mdx/package.json               |  2 +-
 packages/next-plugin-storybook/package.json  |  2 +-
 packages/next-polyfill-module/package.json   |  2 +-
 packages/next-polyfill-nomodule/package.json |  2 +-
 packages/next-rspack/package.json            |  2 +-
 packages/next-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-refresh-utils/package.json    |  2 +-
 packages/third-parties/package.json          |  4 ++--
 pnpm-lock.yaml                               | 16 ++++++++--------
 19 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/lerna.json b/lerna.json
index 8e41bfbfc5cf7..44709b88cbc6d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "15.4.2-canary.3"
+  "version": "15.4.2-canary.4"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 92b4d80b520df..aedb243b132bc 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 9798362d069c1..bdc59188f0008 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/api-reference/config/eslint",
   "dependencies": {
-    "@next/eslint-plugin-next": "15.4.2-canary.3",
+    "@next/eslint-plugin-next": "15.4.2-canary.4",
     "@rushstack/eslint-patch": "^1.10.3",
     "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
diff --git a/packages/eslint-plugin-internal/package.json b/packages/eslint-plugin-internal/package.json
index d095c5636dccb..eedc51d8d1a1b 100644
--- a/packages/eslint-plugin-internal/package.json
+++ b/packages/eslint-plugin-internal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@next/eslint-plugin-internal",
   "private": true,
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "ESLint plugin for working on Next.js.",
   "exports": {
     ".": "./src/eslint-plugin-internal.js"
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 4bb417e5432c3..d49f2fe83f721 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/font/package.json b/packages/font/package.json
index f2a8d22066192..30906e24c5e4f 100644
--- a/packages/font/package.json
+++ b/packages/font/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@next/font",
   "private": true,
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 301ed217534eb..0faf2423cbe6e 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 52f2a25f204e8..609f49c56794d 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index f5270b4f8c38b..0e7a6ec1561d2 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 112029e77f20d..ec3e45ecbb2bc 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 55904e97b4d4b..0fabbca3302f6 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 1ea52e1f2de7c..37370f5169984 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 2f94126a6b2d8..0b2d84c72c446 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-rspack/package.json b/packages/next-rspack/package.json
index 38ca84cf5133e..ff957f9b390df 100644
--- a/packages/next-rspack/package.json
+++ b/packages/next-rspack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-rspack",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-rspack"
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index e176784ee60dd..0cc946902c44f 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "private": true,
   "files": [
     "native/"
diff --git a/packages/next/package.json b/packages/next/package.json
index 92892e124d3e3..49d9dc7460623 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -100,7 +100,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "15.4.2-canary.3",
+    "@next/env": "15.4.2-canary.4",
     "@swc/helpers": "0.5.15",
     "caniuse-lite": "^1.0.30001579",
     "postcss": "8.4.31",
@@ -163,11 +163,11 @@
     "@jest/types": "29.5.0",
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/triples": "1.2.0",
-    "@next/font": "15.4.2-canary.3",
-    "@next/polyfill-module": "15.4.2-canary.3",
-    "@next/polyfill-nomodule": "15.4.2-canary.3",
-    "@next/react-refresh-utils": "15.4.2-canary.3",
-    "@next/swc": "15.4.2-canary.3",
+    "@next/font": "15.4.2-canary.4",
+    "@next/polyfill-module": "15.4.2-canary.4",
+    "@next/polyfill-nomodule": "15.4.2-canary.4",
+    "@next/react-refresh-utils": "15.4.2-canary.4",
+    "@next/swc": "15.4.2-canary.4",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.51.1",
     "@rspack/core": "1.4.5",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 84c8617a7d3b8..174bc90b18c98 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
index a06029a910004..182c3e5523d0d 100644
--- a/packages/third-parties/package.json
+++ b/packages/third-parties/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "15.4.2-canary.3",
+  "version": "15.4.2-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -26,7 +26,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "15.4.2-canary.3",
+    "next": "15.4.2-canary.4",
     "outdent": "0.8.0",
     "prettier": "2.5.1",
     "typescript": "5.8.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9eb08f4c92a5..1cbf779ae7932 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -854,7 +854,7 @@ importers:
   packages/eslint-config-next:
     dependencies:
       '@next/eslint-plugin-next':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../eslint-plugin-next
       '@rushstack/eslint-patch':
         specifier: ^1.10.3
@@ -924,7 +924,7 @@ importers:
   packages/next:
     dependencies:
       '@next/env':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../next-env
       '@swc/helpers':
         specifier: 0.5.15
@@ -1046,19 +1046,19 @@ importers:
         specifier: 1.2.0
         version: 1.2.0
       '@next/font':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../font
       '@next/polyfill-module':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../next-polyfill-module
       '@next/polyfill-nomodule':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../next-polyfill-nomodule
       '@next/react-refresh-utils':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../react-refresh-utils
       '@next/swc':
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../next-swc
       '@opentelemetry/api':
         specifier: 1.6.0
@@ -1758,7 +1758,7 @@ importers:
         version: 1.0.20
     devDependencies:
       next:
-        specifier: 15.4.2-canary.3
+        specifier: 15.4.2-canary.4
         version: link:../next
       outdent:
         specifier: 0.8.0

From 2eac9dccd85d8ec941c416de5f8f01236a8f1e2e Mon Sep 17 00:00:00 2001
From: Ben Gubler <nebrelbug@gmail.com>
Date: Wed, 16 Jul 2025 13:58:34 -0700
Subject: [PATCH 3/7] chore: update username from 'nebrelbug' to 'bgub'
 (#81734)

## Update GitHub username in labeler configuration

I just changed my username from "nebrelbug" to "bgub"
---
 .github/labeler.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/labeler.json b/.github/labeler.json
index 9b74fd4e216b8..1a1e59dc6c2fc 100644
--- a/.github/labeler.json
+++ b/.github/labeler.json
@@ -59,7 +59,7 @@
       { "type": "user", "pattern": "ijjk" },
       { "type": "user", "pattern": "lazarv" },
       { "type": "user", "pattern": "lubieowoce" },
-      { "type": "user", "pattern": "nebrelbug" },
+      { "type": "user", "pattern": "bgub" },
       { "type": "user", "pattern": "RobPruzan" },
       { "type": "user", "pattern": "samcx" },
       { "type": "user", "pattern": "sebmarkbage" },

From 63090e20f198f7bda7bb746e29fe6a25a1391d8c Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Wed, 16 Jul 2025 14:25:01 -0700
Subject: [PATCH 4/7] fix: pages router metadata bugs with React 19 (#81733)

When we updated `experimental.strictNextHead` to be true in #65418, we
did not update all spots that would default to true in the case where
the value was omitted entirely.

This led to the default value not being correctly applied in pages
router, which resulted in duplicate metadata w/ React 19.

Since we made the flag the default, we can also probably clean up this
flag all together, but that can be done separately.

Fixes #81655
Fixes #81689
---
 packages/next/src/build/templates/pages.ts    |   5 +-
 packages/next/src/server/config-shared.ts     |   1 +
 .../client-navigation/fixture/next.config.js  |   9 +-
 .../pages/head-with-custom-metadata.js        |  14 ++
 .../client-navigation/rendering-head.test.ts  | 132 +++++++++++-------
 5 files changed, 106 insertions(+), 55 deletions(-)
 create mode 100644 test/development/pages-dir/client-navigation/fixture/pages/head-with-custom-metadata.js

diff --git a/packages/next/src/build/templates/pages.ts b/packages/next/src/build/templates/pages.ts
index d110080c1635a..339e5a15ace71 100644
--- a/packages/next/src/build/templates/pages.ts
+++ b/packages/next/src/build/templates/pages.ts
@@ -289,9 +289,8 @@ export async function handler(
                   reactLoadableManifest,
 
                   assetPrefix: nextConfig.assetPrefix,
-                  strictNextHead: Boolean(
-                    nextConfig.experimental.strictNextHead
-                  ),
+                  strictNextHead:
+                    nextConfig.experimental.strictNextHead ?? true,
                   previewProps: prerenderManifest.preview,
                   images: nextConfig.images as any,
                   nextConfigOutput: nextConfig.output,
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 3f318b04fcb08..73b5b6b01e8c9 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -1466,6 +1466,7 @@ export const defaultConfig = Object.freeze({
     devtoolSegmentExplorer: false,
     browserDebugInfoInTerminal: false,
     optimizeRouterScrolling: false,
+    strictNextHead: true,
   },
   htmlLimitedBots: undefined,
   bundlePagesRouterDependencies: false,
diff --git a/test/development/pages-dir/client-navigation/fixture/next.config.js b/test/development/pages-dir/client-navigation/fixture/next.config.js
index c7fa1a4a1081e..827ccc75e1159 100644
--- a/test/development/pages-dir/client-navigation/fixture/next.config.js
+++ b/test/development/pages-dir/client-navigation/fixture/next.config.js
@@ -4,9 +4,12 @@ module.exports = {
     // Make sure entries are not getting disposed.
     maxInactiveAge: 1000 * 60 * 60,
   },
-  experimental: {
-    strictNextHead: process.env.TEST_STRICT_NEXT_HEAD !== 'false',
-  },
+  experimental:
+    process.env.TEST_STRICT_NEXT_HEAD !== undefined
+      ? {
+          strictNextHead: process.env.TEST_STRICT_NEXT_HEAD === 'true',
+        }
+      : {},
   // scroll position can be finicky with the
   // indicators showing so hide by default
   devIndicators: false,
diff --git a/test/development/pages-dir/client-navigation/fixture/pages/head-with-custom-metadata.js b/test/development/pages-dir/client-navigation/fixture/pages/head-with-custom-metadata.js
new file mode 100644
index 0000000000000..be2f22ded7cdb
--- /dev/null
+++ b/test/development/pages-dir/client-navigation/fixture/pages/head-with-custom-metadata.js
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+
+export default function Page() {
+  return (
+    <div>
+      <Head>
+        <title>Title Page</title>
+        <meta property="og:title" content="Title Content" />
+        <meta name="description" content="Description Content" />
+      </Head>
+      <p>This is a page!</p>
+    </div>
+  )
+}
diff --git a/test/development/pages-dir/client-navigation/rendering-head.test.ts b/test/development/pages-dir/client-navigation/rendering-head.test.ts
index 769b1d7ea258d..06cf0ffe9cb72 100644
--- a/test/development/pages-dir/client-navigation/rendering-head.test.ts
+++ b/test/development/pages-dir/client-navigation/rendering-head.test.ts
@@ -8,14 +8,17 @@ import path from 'path'
 const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18
 
 describe('Client Navigation rendering <Head />', () => {
-  describe.each([[false], [true]])(
+  describe.each([[false], [true], [undefined]])(
     'with strictNextHead=%s',
     (strictNextHead) => {
       const { next } = nextTestSetup({
         files: path.join(__dirname, 'fixture'),
-        env: {
-          TEST_STRICT_NEXT_HEAD: String(strictNextHead),
-        },
+        env:
+          strictNextHead !== undefined
+            ? {
+                TEST_STRICT_NEXT_HEAD: String(strictNextHead),
+              }
+            : {},
       })
 
       function render(
@@ -37,7 +40,7 @@ describe('Client Navigation rendering <Head />', () => {
       test('header renders default charset', async () => {
         const html = await render('/default-head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta charSet="utf-8" data-next-head=""/>'
             : '<meta charSet="utf-8"/>'
         )
@@ -47,7 +50,7 @@ describe('Client Navigation rendering <Head />', () => {
       test('header renders default viewport', async () => {
         const html = await render('/default-head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="viewport" content="width=device-width" data-next-head=""/>'
             : '<meta name="viewport" content="width=device-width"/>'
         )
@@ -56,17 +59,17 @@ describe('Client Navigation rendering <Head />', () => {
       test('header helper renders header information', async () => {
         const html = await render('/head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta charSet="iso-8859-5" data-next-head=""/>'
             : '<meta charSet="iso-8859-5"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta content="my meta" data-next-head=""/>'
             : '<meta content="my meta"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/>'
             : '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
         )
@@ -76,17 +79,17 @@ describe('Client Navigation rendering <Head />', () => {
       test('header helper dedupes tags', async () => {
         const html = await render('/head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta charSet="iso-8859-5" data-next-head=""/>'
             : '<meta charSet="iso-8859-5"/>'
         )
         expect(html).not.toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta charSet="utf-8" data-next-head=""/>'
             : '<meta charSet="utf-8"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/>'
             : '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
         )
@@ -96,24 +99,25 @@ describe('Client Navigation rendering <Head />', () => {
           '<meta name="viewport" content="width=device-width"'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta content="my meta" data-next-head=""/>'
             : '<meta content="my meta"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<link rel="stylesheet" href="/dup-style.css" data-next-head=""/><link rel="stylesheet" href="/dup-style.css" data-next-head=""/>'
             : '<link rel="stylesheet" href="/dup-style.css"/><link rel="stylesheet" href="/dup-style.css"/>'
         )
-        const dedupeLink = strictNextHead
-          ? '<link rel="stylesheet" href="dedupe-style.css" data-next-head=""/>'
-          : '<link rel="stylesheet" href="dedupe-style.css"/>'
+        const dedupeLink =
+          strictNextHead !== false
+            ? '<link rel="stylesheet" href="dedupe-style.css" data-next-head=""/>'
+            : '<link rel="stylesheet" href="dedupe-style.css"/>'
         expect(html).toContain(dedupeLink)
         expect(
           html.substring(html.indexOf(dedupeLink) + dedupeLink.length)
         ).not.toContain('<link rel="stylesheet" href="dedupe-style.css"')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<link rel="alternate" hrefLang="en" href="/last/en" data-next-head=""/>'
             : '<link rel="alternate" hrefLang="en" href="/last/en"/>'
         )
@@ -129,12 +133,12 @@ describe('Client Navigation rendering <Head />', () => {
         // Expect exactly one `viewport`
         expect((html.match(/name="viewport"/g) || []).length).toBe(1)
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta charSet="iso-8859-1" data-next-head=""/>'
             : '<meta charSet="iso-8859-1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="viewport" content="width=500" data-next-head=""/>'
             : '<meta name="viewport" content="width=500"/>'
         )
@@ -144,98 +148,98 @@ describe('Client Navigation rendering <Head />', () => {
         const html = await render('/head')
         console.log(html)
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="article:tag" content="tag1" data-next-head=""/>'
             : '<meta property="article:tag" content="tag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="article:tag" content="tag2" data-next-head=""/>'
             : '<meta property="article:tag" content="tag2"/>'
         )
         expect(html).not.toContain('<meta property="dedupe:tag" content="tag3"')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="dedupe:tag" content="tag4" data-next-head=""/>'
             : '<meta property="dedupe:tag" content="tag4"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image" content="ogImageTag1" data-next-head=""/>'
             : '<meta property="og:image" content="ogImageTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image" content="ogImageTag2" data-next-head=""/>'
             : '<meta property="og:image" content="ogImageTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:alt" content="ogImageAltTag1" data-next-head=""/>'
             : '<meta property="og:image:alt" content="ogImageAltTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:alt" content="ogImageAltTag2" data-next-head=""/>'
             : '<meta property="og:image:alt" content="ogImageAltTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:width" content="ogImageWidthTag1" data-next-head=""/>'
             : '<meta property="og:image:width" content="ogImageWidthTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:width" content="ogImageWidthTag2" data-next-head=""/>'
             : '<meta property="og:image:width" content="ogImageWidthTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:height" content="ogImageHeightTag1" data-next-head=""/>'
             : '<meta property="og:image:height" content="ogImageHeightTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:height" content="ogImageHeightTag2" data-next-head=""/>'
             : '<meta property="og:image:height" content="ogImageHeightTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:type" content="ogImageTypeTag1" data-next-head=""/>'
             : '<meta property="og:image:type" content="ogImageTypeTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:type" content="ogImageTypeTag2" data-next-head=""/>'
             : '<meta property="og:image:type" content="ogImageTypeTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:secure_url" content="ogImageSecureUrlTag1" data-next-head=""/>'
             : '<meta property="og:image:secure_url" content="ogImageSecureUrlTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:secure_url" content="ogImageSecureUrlTag2" data-next-head=""/>'
             : '<meta property="og:image:secure_url" content="ogImageSecureUrlTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:url" content="ogImageUrlTag1" data-next-head=""/>'
             : '<meta property="og:image:url" content="ogImageUrlTag1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="og:image:url" content="ogImageUrlTag2" data-next-head=""/>'
             : '<meta property="og:image:url" content="ogImageUrlTag2"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="fb:pages" content="fbpages1" data-next-head=""/>'
             : '<meta property="fb:pages" content="fbpages1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta property="fb:pages" content="fbpages2" data-next-head=""/>'
             : '<meta property="fb:pages" content="fbpages2"/>'
         )
@@ -244,12 +248,12 @@ describe('Client Navigation rendering <Head />', () => {
       test('header helper avoids dedupe of meta tags with the same name if they use unique keys', async () => {
         const html = await render('/head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="citation_author" content="authorName1" data-next-head=""/>'
             : '<meta name="citation_author" content="authorName1"/>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta name="citation_author" content="authorName2" data-next-head=""/>'
             : '<meta name="citation_author" content="authorName2"/>'
         )
@@ -258,12 +262,12 @@ describe('Client Navigation rendering <Head />', () => {
       test('header helper renders Fragment children', async () => {
         const html = await render('/head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<title data-next-head="">Fragment title</title>'
             : '<title>Fragment title</title>'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<meta content="meta fragment" data-next-head=""/>'
             : '<meta content="meta fragment"/>'
         )
@@ -272,17 +276,17 @@ describe('Client Navigation rendering <Head />', () => {
       test('header helper renders boolean attributes correctly children', async () => {
         const html = await render('/head')
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<script src="/test-async-false.js" data-next-head="">'
             : '<script src="/test-async-false.js">'
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<script src="/test-async-true.js" async="" data-next-head="">'
             : ''
         )
         expect(html).toContain(
-          strictNextHead
+          strictNextHead !== false
             ? '<script src="/test-defer.js" defer="" data-next-head="">'
             : ''
         )
@@ -290,9 +294,10 @@ describe('Client Navigation rendering <Head />', () => {
 
       it('should place charset element at the top of <head>', async () => {
         const html = await render('/head-priority')
-        const nextHeadElement = strictNextHead
-          ? '<meta charSet="iso-8859-5" data-next-head=""/><meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/><meta name="title" content="head title" data-next-head=""/>'
-          : '<meta charSet="iso-8859-5"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="title" content="head title"/><meta name="next-head-count" content="3"/>'
+        const nextHeadElement =
+          strictNextHead !== false
+            ? '<meta charSet="iso-8859-5" data-next-head=""/><meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/><meta name="title" content="head title" data-next-head=""/>'
+            : '<meta charSet="iso-8859-5"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="title" content="head title"/><meta name="next-head-count" content="3"/>'
         const documentHeadElement =
           '<meta name="keywords" content="document head test"/>'
 
@@ -304,6 +309,35 @@ describe('Client Navigation rendering <Head />', () => {
             : `<head>${nextHeadElement}${documentHeadElement}`
         )
       })
+
+      test('custom meta properties are rendered only once', async () => {
+        const browser = await next.browser('/head-with-custom-metadata')
+
+        // Check that title appears only once
+        const titleElements = await browser.elementsByCss('title')
+        expect(titleElements).toHaveLength(1)
+        const titleText = await browser.elementByCss('title').text()
+        expect(titleText).toBe('Title Page')
+
+        // Check that each meta property appears only once
+        const ogTitleElements = await browser.elementsByCss(
+          'meta[property="og:title"]'
+        )
+        expect(ogTitleElements).toHaveLength(1)
+        const ogTitleContent = await browser
+          .elementByCss('meta[property="og:title"]')
+          .getAttribute('content')
+        expect(ogTitleContent).toBe('Title Content')
+
+        const descriptionElements = await browser.elementsByCss(
+          'meta[name="description"]'
+        )
+        expect(descriptionElements).toHaveLength(1)
+        const descriptionContent = await browser
+          .elementByCss('meta[name="description"]')
+          .getAttribute('content')
+        expect(descriptionContent).toBe('Description Content')
+      })
     }
   )
 })

From 4e0b1125a466bdc81ead94969008c55509ea4ad0 Mon Sep 17 00:00:00 2001
From: Hendrik Liebau <mail@hendrik-liebau.de>
Date: Wed, 16 Jul 2025 23:27:05 +0200
Subject: [PATCH 5/7] Improve error handling for
 `headers`/`cookies`/`draftMode` in `'use cache'` (#81716)

This ensures that we show a proper error with an error stack
(potentially source-mapped) when accessing
`headers`/`cookies`/`draftMode` in `'use cache'`, even when caught in
user-land code. For `searchParams` (currently triggering a timeout
error) we'll need a slightly different solution, which will be handled
in a future PR.

The approach chosen here is somewhat temporary, as we'd like to
implement compile-time errors instead for accessing any kind of request
data in `'use cache'` functions. However, this would require a larger
change to our bundlers.

closes NAR-201
---
 .../next/src/server/app-render/app-render.tsx |   7 +-
 .../server/app-render/dynamic-rendering.ts    |  10 +-
 packages/next/src/server/request/cookies.ts   |   5 +-
 .../next/src/server/request/draft-mode.ts     |  44 ++-
 packages/next/src/server/request/headers.ts   |   5 +-
 .../dynamic-io-errors.test.ts                 | 368 ++++++++++++++++++
 .../default/app/use-cache-cookies/layout.tsx  |   9 +
 .../default/app/use-cache-cookies/page.tsx    |  26 ++
 .../app/use-cache-draft-mode/layout.tsx       |   9 +
 .../default/app/use-cache-draft-mode/page.tsx |  24 ++
 .../default/app/use-cache-headers/layout.tsx  |   9 +
 .../default/app/use-cache-headers/page.tsx    |  25 ++
 .../use-cache-hanging-inputs.test.ts          |  18 +-
 .../app/(dynamic)/errors/error-boundary.tsx   |  26 --
 .../use-cache/app/(dynamic)/errors/page.tsx   |  37 --
 .../use-cache/app/(dynamic)/errors/util.ts    |  13 -
 .../draft-mode/{ => [mode]}/button.tsx        |   0
 .../draft-mode/{ => [mode]}/page.tsx          |  28 +-
 test/e2e/app-dir/use-cache/use-cache.test.ts  | 131 ++++---
 19 files changed, 601 insertions(+), 193 deletions(-)
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/layout.tsx
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/page.tsx
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/layout.tsx
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/page.tsx
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/layout.tsx
 create mode 100644 test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/page.tsx
 delete mode 100644 test/e2e/app-dir/use-cache/app/(dynamic)/errors/error-boundary.tsx
 delete mode 100644 test/e2e/app-dir/use-cache/app/(dynamic)/errors/page.tsx
 delete mode 100644 test/e2e/app-dir/use-cache/app/(dynamic)/errors/util.ts
 rename test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/{ => [mode]}/button.tsx (100%)
 rename test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/{ => [mode]}/page.tsx (80%)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 6a8e744f2e8de..340da527bcd36 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -135,6 +135,7 @@ import {
   PreludeState,
   consumeDynamicAccess,
   type DynamicAccess,
+  logDisallowedDynamicError,
 } from './dynamic-rendering'
 import {
   getClientComponentLoaderMetrics,
@@ -1456,7 +1457,8 @@ async function renderToHTMLOrFlightImpl(
     // If we encountered any unexpected errors during build we fail the
     // prerendering phase and the build.
     if (workStore.invalidDynamicUsageError) {
-      throw workStore.invalidDynamicUsageError
+      logDisallowedDynamicError(workStore, workStore.invalidDynamicUsageError)
+      throw new StaticGenBailoutError()
     }
     if (response.digestErrorsMap.size) {
       const buildFailingError = response.digestErrorsMap.values().next().value
@@ -3047,7 +3049,8 @@ async function prerenderToStream(
       // We don't need to continue the prerender process if we already
       // detected invalid dynamic usage in the initial prerender phase.
       if (workStore.invalidDynamicUsageError) {
-        throw workStore.invalidDynamicUsageError
+        logDisallowedDynamicError(workStore, workStore.invalidDynamicUsageError)
+        throw new StaticGenBailoutError()
       }
 
       let initialServerResult
diff --git a/packages/next/src/server/app-render/dynamic-rendering.ts b/packages/next/src/server/app-render/dynamic-rendering.ts
index 7165ef6e15882..0f8bbd7701505 100644
--- a/packages/next/src/server/app-render/dynamic-rendering.ts
+++ b/packages/next/src/server/app-render/dynamic-rendering.ts
@@ -678,7 +678,10 @@ export enum PreludeState {
   Errored = 2,
 }
 
-function logDisallowedDynamicError(workStore: WorkStore, error: Error): void {
+export function logDisallowedDynamicError(
+  workStore: WorkStore,
+  error: Error
+): void {
   console.error(error)
 
   if (!workStore.dev) {
@@ -700,11 +703,6 @@ export function throwIfDisallowedDynamic(
   dynamicValidation: DynamicValidationState,
   serverDynamic: DynamicTrackingState
 ): void {
-  if (workStore.invalidDynamicUsageError) {
-    logDisallowedDynamicError(workStore, workStore.invalidDynamicUsageError)
-    throw new StaticGenBailoutError()
-  }
-
   if (prelude !== PreludeState.Full) {
     if (dynamicValidation.hasSuspenseAboveBody) {
       // This route has opted into allowing fully dynamic rendering
diff --git a/packages/next/src/server/request/cookies.ts b/packages/next/src/server/request/cookies.ts
index 472219f50be54..07460d5e9671c 100644
--- a/packages/next/src/server/request/cookies.ts
+++ b/packages/next/src/server/request/cookies.ts
@@ -81,9 +81,12 @@ export function cookies(): Promise<ReadonlyRequestCookies> {
     if (workUnitStore) {
       switch (workUnitStore.type) {
         case 'cache':
-          throw new Error(
+          const error = new Error(
             `Route ${workStore.route} used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache`
           )
+          Error.captureStackTrace(error, cookies)
+          workStore.invalidDynamicUsageError ??= error
+          throw error
         case 'unstable-cache':
           throw new Error(
             `Route ${workStore.route} used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache`
diff --git a/packages/next/src/server/request/draft-mode.ts b/packages/next/src/server/request/draft-mode.ts
index d1a6aa9ba3980..a251706ed0365 100644
--- a/packages/next/src/server/request/draft-mode.ts
+++ b/packages/next/src/server/request/draft-mode.ts
@@ -229,13 +229,13 @@ class DraftMode {
   public enable() {
     // We have a store we want to track dynamic data access to ensure we
     // don't statically generate routes that manipulate draft mode.
-    trackDynamicDraftMode('draftMode().enable()')
+    trackDynamicDraftMode('draftMode().enable()', this.enable)
     if (this._provider !== null) {
       this._provider.enable()
     }
   }
   public disable() {
-    trackDynamicDraftMode('draftMode().disable()')
+    trackDynamicDraftMode('draftMode().disable()', this.disable)
     if (this._provider !== null) {
       this._provider.disable()
     }
@@ -286,44 +286,50 @@ function createDraftModeAccessError(
   )
 }
 
-function trackDynamicDraftMode(expression: string) {
-  const store = workAsyncStorage.getStore()
+function trackDynamicDraftMode(expression: string, constructorOpt: Function) {
+  const workStore = workAsyncStorage.getStore()
   const workUnitStore = workUnitAsyncStorage.getStore()
-  if (store) {
+
+  if (workStore) {
     // We have a store we want to track dynamic data access to ensure we
     // don't statically generate routes that manipulate draft mode.
     if (workUnitStore?.phase === 'after') {
       throw new Error(
-        `Route ${store.route} used "${expression}" inside \`after\`. The enabled status of draftMode can be read inside \`after\` but you cannot enable or disable draftMode. See more info here: https://nextjs.org/docs/app/api-reference/functions/after`
+        `Route ${workStore.route} used "${expression}" inside \`after\`. The enabled status of draftMode can be read inside \`after\` but you cannot enable or disable draftMode. See more info here: https://nextjs.org/docs/app/api-reference/functions/after`
       )
     }
 
-    if (store.dynamicShouldError) {
+    if (workStore.dynamicShouldError) {
       throw new StaticGenBailoutError(
-        `Route ${store.route} with \`dynamic = "error"\` couldn't be rendered statically because it used \`${expression}\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering`
+        `Route ${workStore.route} with \`dynamic = "error"\` couldn't be rendered statically because it used \`${expression}\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering`
       )
     }
 
     if (workUnitStore) {
       switch (workUnitStore.type) {
-        case 'cache':
-          throw new Error(
-            `Route ${store.route} used "${expression}" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache`
+        case 'cache': {
+          const error = new Error(
+            `Route ${workStore.route} used "${expression}" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache`
           )
+          Error.captureStackTrace(error, constructorOpt)
+          workStore.invalidDynamicUsageError ??= error
+          throw error
+        }
         case 'unstable-cache':
           throw new Error(
-            `Route ${store.route} used "${expression}" inside a function cached with "unstable_cache(...)". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache`
+            `Route ${workStore.route} used "${expression}" inside a function cached with "unstable_cache(...)". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache`
           )
-        case 'prerender':
+        case 'prerender': {
           const error = new Error(
-            `Route ${store.route} used ${expression} without first calling \`await connection()\`. See more info here: https://nextjs.org/docs/messages/next-prerender-sync-headers`
+            `Route ${workStore.route} used ${expression} without first calling \`await connection()\`. See more info here: https://nextjs.org/docs/messages/next-prerender-sync-headers`
           )
           return abortAndThrowOnSynchronousRequestDataAccess(
-            store.route,
+            workStore.route,
             expression,
             error,
             workUnitStore
           )
+        }
         case 'prerender-client':
           const exportName = '`draftMode`'
           throw new InvariantError(
@@ -331,7 +337,7 @@ function trackDynamicDraftMode(expression: string) {
           )
         case 'prerender-ppr':
           return postponeWithTracking(
-            store.route,
+            workStore.route,
             expression,
             workUnitStore.dynamicTracking
           )
@@ -339,10 +345,10 @@ function trackDynamicDraftMode(expression: string) {
           workUnitStore.revalidate = 0
 
           const err = new DynamicServerError(
-            `Route ${store.route} couldn't be rendered statically because it used \`${expression}\`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error`
+            `Route ${workStore.route} couldn't be rendered statically because it used \`${expression}\`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error`
           )
-          store.dynamicUsageDescription = expression
-          store.dynamicUsageStack = err.stack
+          workStore.dynamicUsageDescription = expression
+          workStore.dynamicUsageStack = err.stack
 
           throw err
         case 'request':
diff --git a/packages/next/src/server/request/headers.ts b/packages/next/src/server/request/headers.ts
index d1fe9412544be..cfa09096fb711 100644
--- a/packages/next/src/server/request/headers.ts
+++ b/packages/next/src/server/request/headers.ts
@@ -79,9 +79,12 @@ export function headers(): Promise<ReadonlyHeaders> {
     if (workUnitStore) {
       switch (workUnitStore.type) {
         case 'cache':
-          throw new Error(
+          const error = new Error(
             `Route ${workStore.route} used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache`
           )
+          Error.captureStackTrace(error, headers)
+          workStore.invalidDynamicUsageError ??= error
+          throw error
         case 'unstable-cache':
           throw new Error(
             `Route ${workStore.route} used "headers" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache`
diff --git a/test/e2e/app-dir/dynamic-io-errors/dynamic-io-errors.test.ts b/test/e2e/app-dir/dynamic-io-errors/dynamic-io-errors.test.ts
index f1232a8bf3316..539d1db7093a6 100644
--- a/test/e2e/app-dir/dynamic-io-errors/dynamic-io-errors.test.ts
+++ b/test/e2e/app-dir/dynamic-io-errors/dynamic-io-errors.test.ts
@@ -2038,5 +2038,373 @@ describe('Dynamic IO Errors', () => {
         }
       })
     })
+
+    describe('Inside `use cache`', () => {
+      describe('cookies', () => {
+        const pathname = '/use-cache-cookies'
+
+        if (isNextDev) {
+          it('should show a redbox error', async () => {
+            const browser = await next.browser(pathname)
+
+            if (isTurbopack) {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-cookies/page.tsx (22:18) @ CookiesReadingComponent
+               > 22 |     await cookies()
+                    |                  ^",
+                 "stack": [
+                   "CookiesReadingComponent app/use-cache-cookies/page.tsx (22:18)",
+                 ],
+               }
+              `)
+            } else {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-cookies/page.tsx (22:18) @ CookiesReadingComponent
+               > 22 |     await cookies()
+                    |                  ^",
+                 "stack": [
+                   "CookiesReadingComponent app/use-cache-cookies/page.tsx (22:18)",
+                 ],
+               }
+              `)
+            }
+          })
+        } else {
+          it('should error the build', async () => {
+            try {
+              await prerender(pathname)
+            } catch {
+              // we expect the build to fail
+            }
+
+            const output = getPrerenderOutput(
+              next.cliOutput.slice(cliOutputLength),
+              { isMinified: !isDebugPrerender }
+            )
+
+            if (isTurbopack) {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at CookiesReadingComponent (turbopack:///[project]/app/use-cache-cookies/page.tsx:22:18)
+                   20 |   // in userland.
+                   21 |   try {
+                 > 22 |     await cookies()
+                      |                  ^
+                   23 |   } catch {}
+                   24 |
+                   25 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-cookies" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-cookies". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-cookies/page: /use-cache-cookies"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at <unknown> (turbopack:///[project]/app/use-cache-cookies/page.tsx:22:11)
+                   20 |   // in userland.
+                   21 |   try {
+                 > 22 |     await cookies()
+                      |           ^
+                   23 |   } catch {}
+                   24 |
+                   25 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-cookies" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-cookies". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-cookies/page: /use-cache-cookies, exiting the build."
+                `)
+              }
+            } else {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at CookiesReadingComponent (webpack:///app/use-cache-cookies/page.tsx:22:18)
+                     at <unknown> (webpack://<next-src>)
+                   20 |   // in userland.
+                   21 |   try {
+                 > 22 |     await cookies()
+                      |                  ^
+                   23 |   } catch {}
+                   24 |
+                   25 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-cookies" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-cookies". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-cookies/page: /use-cache-cookies"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-cookies used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at a (<next-dist-dir>)
+                     at b (<next-dist-dir>)
+                     at c (<next-dist-dir>)
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-cookies" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-cookies". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-cookies/page: /use-cache-cookies, exiting the build."
+                `)
+              }
+            }
+          })
+        }
+      })
+
+      describe('draftMode', () => {
+        const pathname = '/use-cache-draft-mode'
+
+        if (isNextDev) {
+          it('should show a redbox error', async () => {
+            const browser = await next.browser(pathname)
+
+            if (isTurbopack) {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-draft-mode/page.tsx (20:26) @ DraftModeEnablingComponent
+               > 20 |     ;(await draftMode()).enable()
+                    |                          ^",
+                 "stack": [
+                   "DraftModeEnablingComponent app/use-cache-draft-mode/page.tsx (20:26)",
+                 ],
+               }
+              `)
+            } else {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-draft-mode/page.tsx (20:26) @ DraftModeEnablingComponent
+               > 20 |     ;(await draftMode()).enable()
+                    |                          ^",
+                 "stack": [
+                   "DraftModeEnablingComponent app/use-cache-draft-mode/page.tsx (20:26)",
+                 ],
+               }
+              `)
+            }
+          })
+        } else {
+          it('should error the build', async () => {
+            try {
+              await prerender(pathname)
+            } catch {
+              // we expect the build to fail
+            }
+
+            const output = getPrerenderOutput(
+              next.cliOutput.slice(cliOutputLength),
+              { isMinified: !isDebugPrerender }
+            )
+
+            if (isTurbopack) {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at DraftModeEnablingComponent (turbopack:///[project]/app/use-cache-draft-mode/page.tsx:20:26)
+                   18 |   // here to ensure that this error is shown even when it's caught in userland.
+                   19 |   try {
+                 > 20 |     ;(await draftMode()).enable()
+                      |                          ^
+                   21 |   } catch {}
+                   22 |
+                   23 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-draft-mode" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-draft-mode". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-draft-mode/page: /use-cache-draft-mode"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at <unknown> (turbopack:///[project]/app/use-cache-draft-mode/page.tsx:20:26)
+                   18 |   // here to ensure that this error is shown even when it's caught in userland.
+                   19 |   try {
+                 > 20 |     ;(await draftMode()).enable()
+                      |                          ^
+                   21 |   } catch {}
+                   22 |
+                   23 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-draft-mode" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-draft-mode". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-draft-mode/page: /use-cache-draft-mode, exiting the build."
+                `)
+              }
+            } else {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at DraftModeEnablingComponent (webpack:///app/use-cache-draft-mode/page.tsx:20:26)
+                   18 |   // here to ensure that this error is shown even when it's caught in userland.
+                   19 |   try {
+                 > 20 |     ;(await draftMode()).enable()
+                      |                          ^
+                   21 |   } catch {}
+                   22 |
+                   23 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-draft-mode" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-draft-mode". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-draft-mode/page: /use-cache-draft-mode"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of draftMode can be read in caches but you must not enable or disable draftMode inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at a (<next-dist-dir>)
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-draft-mode" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-draft-mode". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-draft-mode/page: /use-cache-draft-mode, exiting the build."
+                `)
+              }
+            }
+          })
+        }
+      })
+
+      describe('headers', () => {
+        const pathname = '/use-cache-headers'
+
+        if (isNextDev) {
+          it('should show a redbox error', async () => {
+            const browser = await next.browser(pathname)
+
+            if (isTurbopack) {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-headers/page.tsx (21:18) @ HeadersReadingComponent
+               > 21 |     await headers()
+                    |                  ^",
+                 "stack": [
+                   "HeadersReadingComponent app/use-cache-headers/page.tsx (21:18)",
+                 ],
+               }
+              `)
+            } else {
+              await expect(browser).toDisplayRedbox(`
+               {
+                 "description": "Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
+                 "environmentLabel": null,
+                 "label": "Runtime Error",
+                 "source": "app/use-cache-headers/page.tsx (21:18) @ HeadersReadingComponent
+               > 21 |     await headers()
+                    |                  ^",
+                 "stack": [
+                   "HeadersReadingComponent app/use-cache-headers/page.tsx (21:18)",
+                 ],
+               }
+              `)
+            }
+          })
+        } else {
+          it('should error the build', async () => {
+            try {
+              await prerender(pathname)
+            } catch {
+              // we expect the build to fail
+            }
+
+            const output = getPrerenderOutput(
+              next.cliOutput.slice(cliOutputLength),
+              { isMinified: !isDebugPrerender }
+            )
+
+            if (isTurbopack) {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at HeadersReadingComponent (turbopack:///[project]/app/use-cache-headers/page.tsx:21:18)
+                   19 |   // to ensure that this error is shown even when it's caught in userland.
+                   20 |   try {
+                 > 21 |     await headers()
+                      |                  ^
+                   22 |   } catch {}
+                   23 |
+                   24 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-headers" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-headers". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-headers/page: /use-cache-headers"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at <unknown> (turbopack:///[project]/app/use-cache-headers/page.tsx:21:11)
+                   19 |   // to ensure that this error is shown even when it's caught in userland.
+                   20 |   try {
+                 > 21 |     await headers()
+                      |           ^
+                   22 |   } catch {}
+                   23 |
+                   24 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-headers" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-headers". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-headers/page: /use-cache-headers, exiting the build."
+                `)
+              }
+            } else {
+              if (isDebugPrerender) {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at HeadersReadingComponent (webpack:///app/use-cache-headers/page.tsx:21:18)
+                     at <unknown> (webpack://<next-src>)
+                   19 |   // to ensure that this error is shown even when it's caught in userland.
+                   20 |   try {
+                 > 21 |     await headers()
+                      |                  ^
+                   22 |   } catch {}
+                   23 |
+                   24 |   return null
+                 To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-headers" in your browser to investigate the error.
+                 Error occurred prerendering page "/use-cache-headers". Read more: https://nextjs.org/docs/messages/prerender-error
+
+                 > Export encountered errors on following paths:
+                 	/use-cache-headers/page: /use-cache-headers"
+                `)
+              } else {
+                expect(output).toMatchInlineSnapshot(`
+                 "Error: Route /use-cache-headers used "headers" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache
+                     at a (<next-dist-dir>)
+                     at b (<next-dist-dir>)
+                     at c (<next-dist-dir>)
+                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
+                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-headers" in your browser to investigate the error.
+                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
+                 Error occurred prerendering page "/use-cache-headers". Read more: https://nextjs.org/docs/messages/prerender-error
+                 Export encountered an error on /use-cache-headers/page: /use-cache-headers, exiting the build."
+                `)
+              }
+            }
+          })
+        }
+      })
+    })
   })
 })
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/layout.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/layout.tsx
new file mode 100644
index 0000000000000..745e32b8a8d23
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/layout.tsx
@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/page.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/page.tsx
new file mode 100644
index 0000000000000..80665a5f22b3c
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-cookies/page.tsx
@@ -0,0 +1,26 @@
+import { cookies } from 'next/headers'
+
+export default async function Page() {
+  return (
+    <>
+      <p>
+        This page accesses `cookies()` in `'use cache'`, which triggers an
+        error.
+      </p>
+      <CookiesReadingComponent />
+    </>
+  )
+}
+
+async function CookiesReadingComponent() {
+  'use cache'
+
+  // Reading cookies in a non-private cache context is not allowed. We're
+  // try/catching here to ensure that this error is shown even when it's caught
+  // in userland.
+  try {
+    await cookies()
+  } catch {}
+
+  return null
+}
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/layout.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/layout.tsx
new file mode 100644
index 0000000000000..745e32b8a8d23
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/layout.tsx
@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/page.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/page.tsx
new file mode 100644
index 0000000000000..d9b55c1797d03
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-draft-mode/page.tsx
@@ -0,0 +1,24 @@
+import { draftMode } from 'next/headers'
+
+export default async function Page() {
+  return (
+    <>
+      <p>
+        This page enables draft mode in `'use cache'`, which triggers an error.
+      </p>
+      <DraftModeEnablingComponent />
+    </>
+  )
+}
+
+async function DraftModeEnablingComponent() {
+  'use cache'
+
+  // Enabling draft mode in a cache context is not allowed. We're try/catching
+  // here to ensure that this error is shown even when it's caught in userland.
+  try {
+    ;(await draftMode()).enable()
+  } catch {}
+
+  return null
+}
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/layout.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/layout.tsx
new file mode 100644
index 0000000000000..745e32b8a8d23
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/layout.tsx
@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/page.tsx b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/page.tsx
new file mode 100644
index 0000000000000..6b4cdb895f83f
--- /dev/null
+++ b/test/e2e/app-dir/dynamic-io-errors/fixtures/default/app/use-cache-headers/page.tsx
@@ -0,0 +1,25 @@
+import { headers } from 'next/headers'
+
+export default async function Page() {
+  return (
+    <>
+      <p>
+        This page accesses `headers()` in `'use cache'`, which triggers an
+        error.
+      </p>
+      <HeadersReadingComponent />
+    </>
+  )
+}
+
+async function HeadersReadingComponent() {
+  'use cache'
+
+  // Reading headers in a cache context is not allowed. We're try/catching here
+  // to ensure that this error is shown even when it's caught in userland.
+  try {
+    await headers()
+  } catch {}
+
+  return null
+}
diff --git a/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts b/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts
index e97a31b9611a3..2aaa3f797bea1 100644
--- a/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts
+++ b/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts
@@ -1,4 +1,5 @@
 import { nextTestSetup } from 'e2e-utils'
+import escapeStringRegexp from 'escape-string-regexp'
 import {
   getRedboxDescription,
   getRedboxSource,
@@ -323,11 +324,16 @@ describe('use-cache-hanging-inputs', () => {
       })
     })
   } else {
+    // TODO: Be more precise about the expected error messages and stacks.
     it('should fail the build with errors after a timeout', async () => {
       const { cliOutput } = await next.build()
 
-      expect(cliOutput).toInclude(
-        createExpectedBuildErrorMessage('/error', 'kaputt!')
+      expect(cliOutput).toInclude(createExpectedBuildErrorMessage('/error'))
+      expect(cliOutput).toInclude('Error: kaputt!')
+
+      expect(cliOutput).toIncludeRepeated(
+        escapeStringRegexp(expectedTimeoutErrorMessage),
+        6
       )
 
       expect(cliOutput).toInclude(
@@ -357,10 +363,6 @@ describe('use-cache-hanging-inputs', () => {
   }
 })
 
-function createExpectedBuildErrorMessage(
-  pathname: string,
-  errorMessage: string = expectedTimeoutErrorMessage
-) {
-  return `Error occurred prerendering page "${pathname}". Read more: https://nextjs.org/docs/messages/prerender-error
-Error: ${errorMessage}`
+function createExpectedBuildErrorMessage(pathname: string) {
+  return `Error occurred prerendering page "${pathname}". Read more: https://nextjs.org/docs/messages/prerender-error`
 }
diff --git a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/error-boundary.tsx b/test/e2e/app-dir/use-cache/app/(dynamic)/errors/error-boundary.tsx
deleted file mode 100644
index 2b05725c7baba..0000000000000
--- a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/error-boundary.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { Component, Suspense } from 'react'
-
-export default class ErrorBoundary extends Component<
-  { id: string; children: React.ReactNode },
-  { message: null | string }
-> {
-  state = { message: null }
-  static getDerivedStateFromError(error: any) {
-    return { message: error.message }
-  }
-  render() {
-    let content
-    if (this.state.message !== null) {
-      content = this.state.message
-    } else {
-      content = this.props.children
-    }
-    return (
-      <p id={this.props.id}>
-        <Suspense>{content}</Suspense>
-      </p>
-    )
-  }
-}
diff --git a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/page.tsx b/test/e2e/app-dir/use-cache/app/(dynamic)/errors/page.tsx
deleted file mode 100644
index 42278f43b4b18..0000000000000
--- a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import ErrorBoundary from './error-boundary'
-
-import { cookies } from 'next/headers'
-
-import { currentUser, currentReferer, isEditing } from './util'
-
-async function Cookie() {
-  'use cache'
-  return <div>User: {currentUser()}</div>
-}
-
-async function Header() {
-  'use cache'
-  return <div>Referer: {currentReferer()}</div>
-}
-
-async function DraftMode() {
-  'use cache'
-  return <div>Editing: {isEditing()}</div>
-}
-
-export default async function Page() {
-  await cookies()
-  return (
-    <div>
-      <ErrorBoundary id="cookies">
-        <Cookie />
-      </ErrorBoundary>
-      <ErrorBoundary id="headers">
-        <Header />
-      </ErrorBoundary>
-      <ErrorBoundary id="draft-mode">
-        <DraftMode />
-      </ErrorBoundary>
-    </div>
-  )
-}
diff --git a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/util.ts b/test/e2e/app-dir/use-cache/app/(dynamic)/errors/util.ts
deleted file mode 100644
index 42257e2e1c1f2..0000000000000
--- a/test/e2e/app-dir/use-cache/app/(dynamic)/errors/util.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cookies, headers, draftMode } from 'next/headers'
-
-export async function currentUser() {
-  return (await cookies()).get('user')?.value
-}
-
-export async function currentReferer() {
-  return (await headers()).get('referer')
-}
-
-export async function isEditing() {
-  return String((await draftMode()).isEnabled)
-}
diff --git a/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/button.tsx b/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/[mode]/button.tsx
similarity index 100%
rename from test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/button.tsx
rename to test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/[mode]/button.tsx
diff --git a/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/page.tsx b/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/[mode]/page.tsx
similarity index 80%
rename from test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/page.tsx
rename to test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/[mode]/page.tsx
index e3367334ec807..fee433e9aaa81 100644
--- a/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/page.tsx
+++ b/test/e2e/app-dir/use-cache/app/(partially-static)/draft-mode/[mode]/page.tsx
@@ -1,5 +1,3 @@
-'use cache'
-
 import { cookies, draftMode } from 'next/headers'
 import { Button } from './button'
 
@@ -24,7 +22,14 @@ async function getCachedValue(
   return [date.toISOString(), fn]
 }
 
-export default async function Page() {
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ mode: string }>
+}) {
+  'use cache'
+
+  const { mode } = await params
   const offset = 1000
 
   const cachedClosure = async () => {
@@ -36,14 +41,8 @@ export default async function Page() {
 
   // Accessing request-scoped data in "use cache" should not be allowed, even if
   // draft mode is enabled. We expect the access to throw.
-  let isAccessingRequestScopedDataAllowedInUseCache = isEnabled
-
-  if (isAccessingRequestScopedDataAllowedInUseCache) {
-    try {
-      await cookies()
-    } catch {
-      isAccessingRequestScopedDataAllowedInUseCache = false
-    }
+  if (isEnabled && mode === 'with-cookies') {
+    await cookies()
   }
 
   const [cachedValue, passthroughFn] = await getCachedValue(
@@ -71,11 +70,12 @@ export default async function Page() {
     >
       <p id="top-level">{cachedValue}</p>
       <p id="closure">{await cachedClosure()}</p>
-      <p id="is-accessing-request-scoped-data-allowed-in-use-cache">
-        {isAccessingRequestScopedDataAllowedInUseCache.toString()}
-      </p>
       <p>{passthroughFn()}</p>
       <Button id="toggle">{isEnabled ? 'Disable' : 'Enable'} Draft Mode</Button>
     </form>
   )
 }
+
+export function generateStaticParams() {
+  return [{ mode: 'with-cookies' }, { mode: 'without-cookies' }]
+}
diff --git a/test/e2e/app-dir/use-cache/use-cache.test.ts b/test/e2e/app-dir/use-cache/use-cache.test.ts
index 5eacf4fbd8406..9ef3f32739a4c 100644
--- a/test/e2e/app-dir/use-cache/use-cache.test.ts
+++ b/test/e2e/app-dir/use-cache/use-cache.test.ts
@@ -134,37 +134,6 @@ describe('use-cache', () => {
     )
   })
 
-  it('should error when cookies/headers/draftMode is used inside "use cache"', async () => {
-    const browser = await next.browser('/errors')
-
-    await retry(async () => {
-      expect(await browser.elementById('cookies').text()).toContain(
-        isNextDev
-          ? 'Route /errors used "cookies" inside "use cache".'
-          : GENERIC_RSC_ERROR
-      )
-      expect(await browser.elementById('headers').text()).toContain(
-        isNextDev
-          ? 'Route /errors used "headers" inside "use cache".'
-          : GENERIC_RSC_ERROR
-      )
-    })
-
-    expect(await browser.elementById('draft-mode').text()).toContain(
-      'Editing: false'
-    )
-
-    // CLI assertions are skipped in deploy mode because `next.cliOutput` will only contain build-time logs.
-    if (!isNextDeploy) {
-      expect(next.cliOutput).toContain(
-        'Route /errors used "cookies" inside "use cache". '
-      )
-      expect(next.cliOutput).toContain(
-        'Route /errors used "headers" inside "use cache". '
-      )
-    }
-  })
-
   it('should cache results in route handlers', async () => {
     const response = await next.fetch('/api')
     const { rand1, rand2 } = await response.json()
@@ -515,7 +484,8 @@ describe('use-cache', () => {
           '/cache-tag',
           '/directive-in-node-modules/with-handler',
           '/directive-in-node-modules/without-handler',
-          '/draft-mode',
+          '/draft-mode/with-cookies',
+          '/draft-mode/without-cookies',
           '/form',
           '/imported-from-client',
           '/logs',
@@ -771,46 +741,60 @@ describe('use-cache', () => {
   })
 
   describe('should not read nor write cached data when draft mode is enabled', () => {
-    if (isNextDeploy) {
-      // Wait for the background revalidation after the deployment to settle.
-      beforeAll(async () => {
-        const browser = await next.browser('/draft-mode')
-        try {
-          const initialTopLevelValue = await browser
-            .elementById('top-level')
-            .text()
-          await retry(async () => {
-            await browser.refresh()
-
-            expect(await browser.elementById('top-level').text()).not.toBe(
-              initialTopLevelValue
-            )
-          })
-        } finally {
-          // we're not in a test, so the browser won't get cleaned up automatically.
-          await browser.close()
-        }
-      })
-    }
-
     it.each([
-      { description: 'js enabled', disableJavaScript: false },
-      { description: 'js disabled', disableJavaScript: true },
-    ])('$description', async ({ disableJavaScript }) => {
-      const browser = await next.browser('/draft-mode', {
+      {
+        description: 'js enabled, with cookies',
+        disableJavaScript: false,
+        mode: 'with-cookies',
+      },
+      {
+        description: 'js disabled, with cookies',
+        disableJavaScript: true,
+        mode: 'with-cookies',
+      },
+      {
+        description: 'js enabled, without cookies',
+        disableJavaScript: false,
+        mode: 'without-cookies',
+      },
+      {
+        description: 'js disabled, without cookies',
+        disableJavaScript: true,
+        mode: 'without-cookies',
+      },
+    ])('$description', async ({ disableJavaScript, mode }) => {
+      const pathname = `/draft-mode/${mode}`
+
+      const browser = await next.browser(pathname, {
         // This test relies on a server action to set draft mode.
         // To ensure that it works for both fetch actions and MPA actions,
         // we test it with javascript disabled too.
         // (this is because of a bug where draft mode status was not correctly propagated to the workStore for MPA actions)
         disableJavaScript,
+        pushErrorAsConsoleLog: true,
       })
 
+      if (isNextDeploy) {
+        // Wait for the background revalidation after the deployment to settle.
+        const initialTopLevelValue = await browser
+          .elementById('top-level')
+          .text()
+
+        await retry(async () => {
+          await browser.refresh()
+
+          expect(await browser.elementById('top-level').text()).not.toBe(
+            initialTopLevelValue
+          )
+        })
+      }
+
       const refreshAfterServerAction = async () => {
         if (disableJavaScript) {
           // browser.refresh() seems to automatically resubmit POST requests,
           // so if we submitted an MPA action, it'll trigger the action again,
           // which in this case will toggle draftMode again.
-          await browser.get(new URL('/draft-mode', next.url).href)
+          await browser.get(new URL(pathname, next.url).href)
         } else {
           await browser.refresh()
         }
@@ -835,7 +819,29 @@ describe('use-cache', () => {
         initialClosureValue
       )
 
+      // Enable draft mode.
       await browser.elementByCss('button#toggle').click()
+
+      // When reading cookies, we expect an error.
+      // TODO: Ideally this would be a compile-time error.
+      if (mode === 'with-cookies') {
+        return retry(async () => {
+          const logs = await browser.log()
+
+          const expectedErrorMessage = disableJavaScript
+            ? 'Failed to load resource: the server responded with a status of 500 (Internal Server Error)'
+            : isNextDev
+              ? 'Route /draft-mode/[mode] used "cookies" inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache'
+              : GENERIC_RSC_ERROR
+
+          expect(logs).toMatchObject(
+            expect.arrayContaining([
+              { source: 'error', message: expectedErrorMessage },
+            ])
+          )
+        })
+      }
+
       await browser.waitForElementByCss('button#toggle:enabled')
 
       expect(await browser.elementByCss('button#toggle').text()).toBe(
@@ -862,13 +868,6 @@ describe('use-cache', () => {
         newClosureValue
       )
 
-      // Accessing request-scoped data should still not be allowed.
-      expect(
-        await browser
-          .elementById('is-accessing-request-scoped-data-allowed-in-use-cache')
-          .text()
-      ).toBe('false')
-
       await browser.elementByCss('button#toggle').click()
       await browser.waitForElementByCss('button#toggle:enabled')
 

From 96b31f8e678bfe2c259a96b97d35632373bced38 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 17 Jul 2025 01:19:46 +0200
Subject: [PATCH 6/7] [devtool] fix duplicate rendered indicator on server
 (#81729)

There're should be only one indicator rendered when `showIndicator` state is true, the previous condition is not correct since the previous change seem causing indicator always rendered even on SSR. since devtool bundle is also bundled on ssr layer, but the related code should not get executed. We noticed the previous condition will always render the indicator, which likely triggered some `base-ui` browser code to execute on server and crash on windows.

Related #81722
---
 .../devtools-indicator/devtools-indicator.css | 145 ++++
 .../devtools-indicator.stories.tsx            |   8 +-
 .../devtools-indicator/devtools-indicator.tsx |   8 +-
 .../devtools-indicator/next-logo.stories.tsx  |   4 +-
 .../devtools-indicator/next-logo.tsx          |   2 +-
 .../dev-tools-indicator.stories.tsx           | 103 ---
 .../dev-tools-indicator.tsx                   | 705 ------------------
 .../dev-tools-info/segments-explorer.tsx      |  21 -
 .../dev-tools-indicator/next-logo.stories.tsx |  82 --
 .../errors/dev-tools-indicator/next-logo.tsx  | 598 ---------------
 .../next-devtools/dev-overlay/dev-overlay.tsx |  31 +-
 .../dev-overlay/menu/dev-overlay-menu.tsx     |  81 +-
 .../dev-overlay/styles/component-styles.tsx   |   2 -
 13 files changed, 235 insertions(+), 1555 deletions(-)
 create mode 100644 packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css
 delete mode 100644 packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
 delete mode 100644 packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
 delete mode 100644 packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/segments-explorer.tsx
 delete mode 100644 packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.stories.tsx
 delete mode 100644 packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.tsx

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css
new file mode 100644
index 0000000000000..4b6476e1ec7c3
--- /dev/null
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css
@@ -0,0 +1,145 @@
+[data-nextjs-toast] {
+  &[data-hidden='true'] {
+    display: none;
+  }
+}
+
+.dev-tools-indicator-menu {
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: var(--color-background-100);
+  border: 1px solid var(--color-gray-alpha-400);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-menu);
+  border-radius: var(--rounded-xl);
+  position: absolute;
+  font-family: var(--font-stack-sans);
+  z-index: 3;
+  overflow: hidden;
+  opacity: 0;
+  outline: 0;
+  min-width: 248px;
+  transition: opacity var(--animate-out-duration-ms)
+    var(--animate-out-timing-function);
+
+  &[data-rendered='true'] {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.dev-tools-indicator-inner {
+  padding: 6px;
+  width: 100%;
+}
+
+.dev-tools-indicator-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 6px;
+  height: var(--size-36);
+  border-radius: 6px;
+  text-decoration: none !important;
+  user-select: none;
+  white-space: nowrap;
+
+  svg {
+    width: var(--size-16);
+    height: var(--size-16);
+  }
+
+  &:focus-visible {
+    outline: 0;
+  }
+}
+
+.dev-tools-indicator-footer {
+  background: var(--color-background-200);
+  padding: 6px;
+  border-top: 1px solid var(--color-gray-400);
+  width: 100%;
+}
+
+.dev-tools-indicator-item[data-selected='true'] {
+  cursor: pointer;
+  background-color: var(--color-gray-200);
+}
+
+.dev-tools-indicator-label {
+  font-size: var(--size-14);
+  line-height: var(--size-20);
+  color: var(--color-gray-1000);
+}
+
+.dev-tools-indicator-value {
+  font-size: var(--size-14);
+  line-height: var(--size-20);
+  color: var(--color-gray-900);
+  margin-left: auto;
+}
+
+.dev-tools-indicator-issue-count {
+  --color-primary: var(--color-gray-800);
+  --color-secondary: var(--color-gray-100);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: var(--size-40);
+  height: var(--size-24);
+  background: var(--color-background-100);
+  border: 1px solid var(--color-gray-alpha-400);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-small);
+  padding: 2px;
+  color: var(--color-gray-1000);
+  border-radius: 128px;
+  font-weight: 500;
+  font-size: var(--size-13);
+  font-variant-numeric: tabular-nums;
+
+  &[data-has-issues='true'] {
+    --color-primary: var(--color-red-800);
+    --color-secondary: var(--color-red-100);
+  }
+
+  .dev-tools-indicator-issue-count-indicator {
+    width: var(--size-8);
+    height: var(--size-8);
+    background: var(--color-primary);
+    box-shadow: 0 0 0 2px var(--color-secondary);
+    border-radius: 50%;
+  }
+}
+
+.dev-tools-indicator-shortcut {
+  display: flex;
+  gap: 4px;
+
+  kbd {
+    width: var(--size-20);
+    height: var(--size-20);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--rounded-md);
+    border: 1px solid var(--color-gray-400);
+    font-family: var(--font-stack-sans);
+    background: var(--color-background-100);
+    color: var(--color-gray-1000);
+    text-align: center;
+    font-size: var(--size-12);
+    line-height: var(--size-16);
+  }
+}
+
+.dev-tools-grabbing {
+  cursor: grabbing;
+
+  > * {
+    pointer-events: none;
+  }
+}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx
index 5f6b5dcc508c1..4d957bad50df9 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { OverlayState } from '../../shared'
 
-import { DevToolsIndicatorNew } from './devtools-indicator'
+import { DevToolsIndicator } from './devtools-indicator'
 import { INITIAL_OVERLAY_STATE } from '../../shared'
 import { withShadowPortal } from '../../storybook/with-shadow-portal'
 
-const meta: Meta<typeof DevToolsIndicatorNew> = {
-  component: DevToolsIndicatorNew,
+const meta: Meta<typeof DevToolsIndicator> = {
+  component: DevToolsIndicator,
   parameters: {
     layout: 'centered',
   },
@@ -37,7 +37,7 @@ const meta: Meta<typeof DevToolsIndicatorNew> = {
 }
 
 export default meta
-type Story = StoryObj<typeof DevToolsIndicatorNew>
+type Story = StoryObj<typeof DevToolsIndicator>
 
 const state: OverlayState = {
   ...INITIAL_OVERLAY_STATE,
diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
index 710f9eedf3122..14f3021abf49a 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
@@ -1,6 +1,6 @@
+import './devtools-indicator.css'
 import type { CSSProperties } from 'react'
-
-import { NextLogoNew } from './next-logo'
+import { NextLogo } from './next-logo'
 import { Toast } from '../toast'
 import {
   MENU_CURVE,
@@ -20,7 +20,7 @@ import type { DevToolsIndicatorPosition } from '../errors/dev-tools-indicator/de
 
 export const INDICATOR_PADDING = 20
 
-export function DevToolsIndicatorNew() {
+export function DevToolsIndicator() {
   const { state, dispatch } = useDevOverlayContext()
   const { panel, setPanel, setSelectedIndex } = usePanelRouterContext()
   const updateAllPanelPositions = useUpdateAllPanelPositions()
@@ -56,7 +56,7 @@ export function DevToolsIndicatorNew() {
           updateAllPanelPositions(p)
         }}
       >
-        <NextLogoNew
+        <NextLogo
           onTriggerClick={() => {
             const newPanel =
               panel === 'panel-selector' ? null : 'panel-selector'
diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx
index ed2ed7b27b312..71f130d985481 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { NextLogoNew } from './next-logo'
+import { NextLogo } from './next-logo'
 import { withShadowPortal } from '../../storybook/with-shadow-portal'
 // TODO(rob): this storybook's configurability is broken intentionally
 // it will be restored when we wrap it in the storybook context addon https://storybook.js.org/addons/storybook-react-context
@@ -10,7 +10,7 @@ const StoryBookNextLogo = (
     isDevRendering: boolean
   } & Record<string, unknown>
 ) => {
-  return <NextLogoNew onTriggerClick={() => {}} />
+  return <NextLogo onTriggerClick={() => {}} />
 }
 
 const meta: Meta<typeof StoryBookNextLogo> = {
diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx
index ea5c0906e1a55..f52f325635284 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx
@@ -16,7 +16,7 @@ import { BASE_LOGO_SIZE } from '../../utils/indicator-metrics'
 
 const SHORT_DURATION_MS = 150
 
-export function NextLogoNew({
+export function NextLogo({
   onTriggerClick,
   ...buttonProps
 }: { onTriggerClick: () => void } & React.ComponentProps<'button'>) {
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
deleted file mode 100644
index 04092676b6d0c..0000000000000
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { DevOverlayStoryWrapper } from '../../../storybook/DevOverlayStoryWrapper'
-import { withShadowPortal } from '../../../storybook/with-shadow-portal'
-import type { VersionInfo } from '../../../../../server/dev/parse-version-info'
-import {
-  getStoredPanelPosition,
-  STORE_KEY_SHARED_PANEL_LOCATION,
-  type OverlayState,
-} from '../../../shared'
-
-const meta: Meta<typeof DevOverlayStoryWrapper> = {
-  component: DevOverlayStoryWrapper,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {},
-  decorators: [
-    withShadowPortal,
-    // Test for high z-index
-    (Story) => (
-      <div
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          zIndex: 9999,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background:
-            'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof DevOverlayStoryWrapper>
-
-// Mock version info for stories
-const mockVersionInfo: VersionInfo = {
-  installed: '15.1.2',
-  staleness: 'stale-major',
-}
-
-const state: OverlayState = {
-  routerType: 'app',
-  devToolsPanelPosition: {
-    [STORE_KEY_SHARED_PANEL_LOCATION]: getStoredPanelPosition(),
-  },
-  nextId: 1,
-  buildError: null,
-  errors: [],
-  refreshState: { type: 'idle' },
-  disableDevIndicator: false,
-  showIndicator: true,
-  versionInfo: mockVersionInfo,
-  notFound: false,
-  buildingIndicator: false,
-  renderingIndicator: false,
-  staticIndicator: true,
-  debugInfo: { devtoolsFrontendUrl: undefined },
-  isErrorOverlayOpen: false,
-  showRestartServerButton: false,
-  devToolsPosition: 'bottom-left',
-  scale: 1,
-  page: '',
-}
-
-export const StaticRoute: Story = {
-  render: () => (
-    <DevOverlayStoryWrapper initialState={state} runtimeErrors={[]} />
-  ),
-}
-
-export const DynamicRoute: Story = {
-  render: () => (
-    <DevOverlayStoryWrapper
-      initialState={{ ...state, staticIndicator: false }}
-      runtimeErrors={[]}
-    />
-  ),
-}
-
-export const SingleError: Story = {
-  render: () => (
-    <DevOverlayStoryWrapper initialState={state} runtimeErrors={[{} as any]} />
-  ),
-}
-
-export const MultipleErrors: Story = {
-  render: () => (
-    <DevOverlayStoryWrapper
-      initialState={state}
-      runtimeErrors={[{}, {}, {}] as any}
-    />
-  ),
-}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
deleted file mode 100644
index a254de86d1d1b..0000000000000
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
+++ /dev/null
@@ -1,705 +0,0 @@
-import type { CSSProperties, Dispatch, SetStateAction } from 'react'
-import {
-  ACTION_ERROR_OVERLAY_OPEN,
-  ACTION_ERROR_OVERLAY_TOGGLE,
-  STORAGE_KEY_POSITION,
-  type OverlayDispatch,
-  type OverlayState,
-} from '../../../shared'
-
-import { useState, useEffect, useRef, createContext, useContext } from 'react'
-import { Toast } from '../../toast'
-import { NextLogo } from './next-logo'
-import { useDelayedRender } from '../../../hooks/use-delayed-render'
-import { TurbopackInfo } from './dev-tools-info/turbopack-info'
-import { RouteInfo } from './dev-tools-info/route-info'
-import GearIcon from '../../../icons/gear-icon'
-import { UserPreferences } from './dev-tools-info/user-preferences'
-import {
-  MENU_CURVE,
-  MENU_DURATION_MS,
-  useClickOutsideAndEscape,
-  useFocusTrap,
-} from './utils'
-import {
-  getInitialPosition,
-  useHideShortcutStorage,
-  type DevToolsScale,
-} from './dev-tools-info/preferences'
-import { Draggable } from './draggable'
-import { useShortcuts } from '../../../hooks/use-shortcuts'
-
-// TODO: add E2E tests to cover different scenarios
-
-export function DevToolsIndicator({
-  state,
-  errorCount,
-  isBuildError,
-  ...props
-}: {
-  state: OverlayState
-  dispatch: OverlayDispatch
-  errorCount: number
-  isBuildError: boolean
-
-  scale: DevToolsScale
-  setScale: (value: DevToolsScale) => void
-}) {
-  const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =
-    useState(true)
-
-  return (
-    <DevToolsPopover
-      routerType={state.routerType}
-      semver={state.versionInfo.installed}
-      issueCount={errorCount}
-      isDevBuilding={state.buildingIndicator}
-      isDevRendering={state.renderingIndicator}
-      isStaticRoute={state.staticIndicator}
-      hide={() => {
-        setIsDevToolsIndicatorVisible(false)
-        fetch('/__nextjs_disable_dev_indicator', {
-          method: 'POST',
-        })
-      }}
-      toggleVisibility={() => {
-        setIsDevToolsIndicatorVisible(!isDevToolsIndicatorVisible)
-      }}
-      isTurbopack={!!process.env.TURBOPACK}
-      disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}
-      isBuildError={isBuildError}
-      page={state.page}
-      {...props}
-    />
-  )
-}
-
-//////////////////////////////////////////////////////////////////////////////////////
-
-interface C {
-  closeMenu?: () => void
-  selectedIndex: number
-  setSelectedIndex: Dispatch<SetStateAction<number>>
-}
-
-export const MenuContext = createContext({} as C)
-
-const OVERLAYS = {
-  Root: 'root',
-  Turbo: 'turbo',
-  Route: 'route',
-  Preferences: 'preferences',
-  SegmentExplorer: 'segment-explorer',
-} as const
-
-export type Overlays = (typeof OVERLAYS)[keyof typeof OVERLAYS]
-
-const INDICATOR_PADDING = 20
-
-// Dynamic import for SegmentsExplorer which including base-ui that causing Edge browser crash
-// x-ref: https://github.com/vercel/next.js/pull/64602
-// TODO: remove this once the new base-ui version is released
-const SegmentsExplorer = process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER
-  ? (
-      require('./dev-tools-info/segments-explorer') as typeof import('./dev-tools-info/segments-explorer')
-    ).SegmentsExplorer
-  : () => null
-
-function DevToolsPopover({
-  routerType,
-  disabled,
-  issueCount,
-  isDevBuilding,
-  isDevRendering,
-  isStaticRoute,
-  isTurbopack,
-  isBuildError,
-  hide,
-  toggleVisibility,
-  dispatch,
-  scale,
-  setScale,
-  page,
-}: {
-  routerType: 'pages' | 'app'
-  disabled: boolean
-  issueCount: number
-  isStaticRoute: boolean
-  semver: string | undefined
-  isDevBuilding: boolean
-  isDevRendering: boolean
-  isTurbopack: boolean
-  isBuildError: boolean
-  hide: () => void
-  toggleVisibility: () => void
-  dispatch: OverlayDispatch
-  scale: DevToolsScale
-  setScale: (value: DevToolsScale) => void
-  page: string
-}) {
-  const rootRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLButtonElement | null>(null)
-
-  const [open, setOpen] = useState<Overlays | null>(null)
-  const [position, setPosition] = useState(getInitialPosition())
-  const [selectedIndex, setSelectedIndex] = useState(-1)
-  const [hideShortcut, setHideShortcut] = useHideShortcutStorage()
-
-  const isMenuOpen = open === OVERLAYS.Root
-  const isTurbopackInfoOpen = open === OVERLAYS.Turbo
-  const isRouteInfoOpen = open === OVERLAYS.Route
-  const isPreferencesOpen = open === OVERLAYS.Preferences
-  const isSegmentExplorerOpen = open === OVERLAYS.SegmentExplorer
-
-  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(
-    isMenuOpen,
-    {
-      // Intentionally no fade in, makes the UI feel more immediate
-      enterDelay: 0,
-      // Graceful fade out to confirm that the UI did not break
-      exitDelay: MENU_DURATION_MS,
-    }
-  )
-
-  // Features to make the menu accessible
-  useFocusTrap(menuRef, triggerRef, isMenuOpen)
-  useClickOutsideAndEscape(menuRef, triggerRef, menuMounted, closeMenu)
-  useShortcuts(hideShortcut ? { [hideShortcut]: hideDevTools } : {}, triggerRef)
-
-  useEffect(() => {
-    if (open === null) {
-      // Avoid flashing selected state
-      const id = setTimeout(() => {
-        setSelectedIndex(-1)
-      }, MENU_DURATION_MS)
-      return () => clearTimeout(id)
-    }
-  }, [open])
-
-  function hideDevTools() {
-    toggleVisibility()
-    const root = rootRef.current
-    // Toggle custom hidden attribute, no need
-    // to close the menu in case you want to quickly get it
-    // out the way to see an element behind it.
-    if (root) {
-      root.dataset.hidden = root.dataset.hidden === 'true' ? 'false' : 'true'
-    }
-  }
-
-  function select(index: number | 'first' | 'last') {
-    if (index === 'first') {
-      setTimeout(() => {
-        const all = menuRef.current?.querySelectorAll('[role="menuitem"]')
-        if (all) {
-          const firstIndex = all[0].getAttribute('data-index')
-          select(Number(firstIndex))
-        }
-      })
-      return
-    }
-
-    if (index === 'last') {
-      setTimeout(() => {
-        const all = menuRef.current?.querySelectorAll('[role="menuitem"]')
-        if (all) {
-          const lastIndex = all.length - 1
-          select(lastIndex)
-        }
-      })
-      return
-    }
-
-    const el = menuRef.current?.querySelector(
-      `[data-index="${index}"]`
-    ) as HTMLElement
-
-    if (el) {
-      setSelectedIndex(index)
-      el?.focus()
-    }
-  }
-
-  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {
-    e.preventDefault()
-
-    switch (e.key) {
-      case 'ArrowDown':
-        const next = selectedIndex + 1
-        select(next)
-        break
-      case 'ArrowUp':
-        const prev = selectedIndex - 1
-        select(prev)
-        break
-      case 'Home':
-        select('first')
-        break
-      case 'End':
-        select('last')
-        break
-      default:
-        break
-    }
-  }
-
-  function openErrorOverlay() {
-    setOpen(null)
-    if (issueCount > 0) {
-      dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
-    }
-  }
-
-  function toggleErrorOverlay() {
-    dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
-  }
-
-  function closeToRootMenu() {
-    setOpen(OVERLAYS.Root)
-    // We wait for the menu animation to complete
-    setTimeout(() => {
-      // This places focus again on the selected item
-      // so you can press Enter to trigger the selected item again
-      select(selectedIndex)
-    }, MENU_DURATION_MS)
-  }
-
-  function onTriggerClick() {
-    if (open === OVERLAYS.Root) {
-      setOpen(null)
-    } else {
-      setOpen(OVERLAYS.Root)
-      setTimeout(() => {
-        select('first')
-      })
-    }
-  }
-
-  function closeMenu() {
-    // Only close when we were on `Root`,
-    // otherwise it will close other overlays
-    setOpen((prevOpen) => {
-      if (prevOpen === OVERLAYS.Root) {
-        return null
-      }
-      return prevOpen
-    })
-  }
-
-  function handleHideDevtools() {
-    setOpen(null)
-    hide()
-  }
-
-  const [vertical, horizontal] = position.split('-', 2)
-  const popover = { [vertical]: 'calc(100% + 8px)', [horizontal]: 0 }
-
-  return (
-    <Toast
-      ref={rootRef}
-      data-nextjs-toast
-      style={
-        {
-          '--animate-out-duration-ms': `${MENU_DURATION_MS}ms`,
-          '--animate-out-timing-function': MENU_CURVE,
-          boxShadow: 'none',
-          [vertical]: `${INDICATOR_PADDING}px`,
-          [horizontal]: `${INDICATOR_PADDING}px`,
-        } as CSSProperties
-      }
-    >
-      <Draggable
-        padding={INDICATOR_PADDING}
-        onDragStart={() => setOpen(null)}
-        position={position}
-        setPosition={(p) => {
-          localStorage.setItem(STORAGE_KEY_POSITION, p)
-          setPosition(p)
-        }}
-      >
-        {/* Trigger */}
-        <NextLogo
-          ref={triggerRef}
-          aria-haspopup="menu"
-          aria-expanded={isMenuOpen}
-          aria-controls="nextjs-dev-tools-menu"
-          aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}
-          data-nextjs-dev-tools-button
-          disabled={disabled}
-          issueCount={issueCount}
-          onTriggerClick={onTriggerClick}
-          toggleErrorOverlay={toggleErrorOverlay}
-          isDevBuilding={isDevBuilding}
-          isDevRendering={isDevRendering}
-          isBuildError={isBuildError}
-          scale={scale}
-        />
-      </Draggable>
-
-      {/* Route Info */}
-      <RouteInfo
-        isOpen={isRouteInfoOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-        routerType={routerType}
-        routeType={isStaticRoute ? 'Static' : 'Dynamic'}
-      />
-
-      {/* Turbopack Info */}
-      <TurbopackInfo
-        isOpen={isTurbopackInfoOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-      />
-
-      {/* Preferences */}
-      <UserPreferences
-        isOpen={isPreferencesOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-        hide={handleHideDevtools}
-        setPosition={setPosition}
-        position={position}
-        scale={scale}
-        setScale={setScale}
-        hideShortcut={hideShortcut}
-        setHideShortcut={setHideShortcut}
-      />
-
-      {/* Page Route Info */}
-      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
-        <SegmentsExplorer
-          isOpen={isSegmentExplorerOpen}
-          close={closeToRootMenu}
-          triggerRef={triggerRef}
-          style={popover}
-          routerType={routerType}
-          page={page}
-        />
-      ) : null}
-
-      {/* Dropdown Menu */}
-      {menuMounted && (
-        <div
-          ref={menuRef}
-          id="nextjs-dev-tools-menu"
-          role="menu"
-          dir="ltr"
-          aria-orientation="vertical"
-          aria-label="Next.js Dev Tools Items"
-          tabIndex={-1}
-          className="dev-tools-indicator-menu"
-          onKeyDown={onMenuKeydown}
-          data-rendered={menuRendered}
-          style={popover}
-        >
-          <MenuContext.Provider
-            value={{
-              closeMenu,
-              selectedIndex,
-              setSelectedIndex,
-            }}
-          >
-            <div className="dev-tools-indicator-inner">
-              {issueCount > 0 && (
-                <MenuItem
-                  title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}
-                  index={0}
-                  label="Issues"
-                  value={<IssueCount>{issueCount}</IssueCount>}
-                  onClick={openErrorOverlay}
-                />
-              )}
-              <MenuItem
-                title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}
-                label="Route"
-                index={1}
-                value={isStaticRoute ? 'Static' : 'Dynamic'}
-                onClick={() => setOpen(OVERLAYS.Route)}
-                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}
-              />
-              {isTurbopack ? (
-                <MenuItem
-                  title="Turbopack is enabled."
-                  label="Turbopack"
-                  value="Enabled"
-                />
-              ) : (
-                <MenuItem
-                  index={2}
-                  title="Learn about Turbopack and how to enable it in your application."
-                  label="Try Turbopack"
-                  value={<ChevronRight />}
-                  onClick={() => setOpen(OVERLAYS.Turbo)}
-                />
-              )}
-            </div>
-
-            <div className="dev-tools-indicator-footer">
-              <MenuItem
-                data-preferences
-                label="Preferences"
-                value={<GearIcon />}
-                onClick={() => setOpen(OVERLAYS.Preferences)}
-                index={isTurbopack ? 2 : 3}
-              />
-              {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
-                <MenuItem
-                  data-segment-explorer
-                  label="Route Info"
-                  value={<ChevronRight />}
-                  onClick={() => setOpen(OVERLAYS.SegmentExplorer)}
-                  index={isTurbopack ? 3 : 4}
-                />
-              ) : null}
-            </div>
-          </MenuContext.Provider>
-        </div>
-      )}
-    </Toast>
-  )
-}
-
-function ChevronRight() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
-      <path
-        fill="#666"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z"
-      />
-    </svg>
-  )
-}
-
-export function MenuItem({
-  index,
-  label,
-  value,
-  onClick,
-  href,
-  ...props
-}: {
-  index?: number
-  title?: string
-  label: string
-  value: React.ReactNode
-  href?: string
-  onClick?: () => void
-}) {
-  const isInteractive =
-    typeof onClick === 'function' || typeof href === 'string'
-  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(MenuContext)
-  const selected = selectedIndex === index
-
-  function click() {
-    if (isInteractive) {
-      onClick?.()
-      closeMenu?.()
-      if (href) {
-        window.open(href, '_blank', 'noopener, noreferrer')
-      }
-    }
-  }
-
-  return (
-    <div
-      className="dev-tools-indicator-item"
-      data-index={index}
-      data-selected={selected}
-      onClick={click}
-      // Needs `onMouseMove` instead of enter to work together
-      // with keyboard and mouse input
-      onMouseMove={() => {
-        if (isInteractive && index !== undefined && selectedIndex !== index) {
-          setSelectedIndex(index)
-        }
-      }}
-      onMouseLeave={() => setSelectedIndex(-1)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          click()
-        }
-      }}
-      role={isInteractive ? 'menuitem' : undefined}
-      tabIndex={selected ? 0 : -1}
-      {...props}
-    >
-      <span className="dev-tools-indicator-label">{label}</span>
-      <span className="dev-tools-indicator-value">{value}</span>
-    </div>
-  )
-}
-
-function IssueCount({ children }: { children: number }) {
-  return (
-    <span
-      className="dev-tools-indicator-issue-count"
-      data-has-issues={children > 0}
-    >
-      <span className="dev-tools-indicator-issue-count-indicator" />
-      {children}
-    </span>
-  )
-}
-
-//////////////////////////////////////////////////////////////////////////////////////
-
-export const DEV_TOOLS_INDICATOR_STYLES = `
-  [data-nextjs-toast] {
-    &[data-hidden='true'] {
-      display: none;
-    }
-  }
-
-  .dev-tools-indicator-menu {
-    -webkit-font-smoothing: antialiased;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background: var(--color-background-100);
-    border: 1px solid var(--color-gray-alpha-400);
-    background-clip: padding-box;
-    box-shadow: var(--shadow-menu);
-    border-radius: var(--rounded-xl);
-    position: absolute;
-    font-family: var(--font-stack-sans);
-    z-index: 3;
-    overflow: hidden;
-    opacity: 0;
-    outline: 0;
-    min-width: 248px;
-    transition: opacity var(--animate-out-duration-ms)
-      var(--animate-out-timing-function);
-
-    &[data-rendered='true'] {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  .dev-tools-indicator-inner {
-    padding: 6px;
-    width: 100%;
-  }
-
-  .dev-tools-indicator-item {
-    display: flex;
-    align-items: center;
-    padding: 8px 6px;
-    height: var(--size-36);
-    border-radius: 6px;
-    text-decoration: none !important;
-    user-select: none;
-    white-space: nowrap;
-
-    svg {
-      width: var(--size-16);
-      height: var(--size-16);
-    }
-
-    &:focus-visible {
-      outline: 0;
-    }
-  }
-
-  .dev-tools-indicator-footer {
-    background: var(--color-background-200);
-    padding: 6px;
-    border-top: 1px solid var(--color-gray-400);
-    width: 100%;
-  }
-
-  .dev-tools-indicator-item[data-selected='true'] {
-    cursor: pointer;
-    background-color: var(--color-gray-200);
-  }
-
-  .dev-tools-indicator-label {
-    font-size: var(--size-14);
-    line-height: var(--size-20);
-    color: var(--color-gray-1000);
-  }
-
-  .dev-tools-indicator-value {
-    font-size: var(--size-14);
-    line-height: var(--size-20);
-    color: var(--color-gray-900);
-    margin-left: auto;
-  }
-
-  .dev-tools-indicator-issue-count {
-    --color-primary: var(--color-gray-800);
-    --color-secondary: var(--color-gray-100);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    min-width: var(--size-40);
-    height: var(--size-24);
-    background: var(--color-background-100);
-    border: 1px solid var(--color-gray-alpha-400);
-    background-clip: padding-box;
-    box-shadow: var(--shadow-small);
-    padding: 2px;
-    color: var(--color-gray-1000);
-    border-radius: 128px;
-    font-weight: 500;
-    font-size: var(--size-13);
-    font-variant-numeric: tabular-nums;
-
-    &[data-has-issues='true'] {
-      --color-primary: var(--color-red-800);
-      --color-secondary: var(--color-red-100);
-    }
-
-    .dev-tools-indicator-issue-count-indicator {
-      width: var(--size-8);
-      height: var(--size-8);
-      background: var(--color-primary);
-      box-shadow: 0 0 0 2px var(--color-secondary);
-      border-radius: 50%;
-    }
-  }
-
-  .dev-tools-indicator-shortcut {
-    display: flex;
-    gap: 4px;
-
-    kbd {
-      width: var(--size-20);
-      height: var(--size-20);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: var(--rounded-md);
-      border: 1px solid var(--color-gray-400);
-      font-family: var(--font-stack-sans);
-      background: var(--color-background-100);
-      color: var(--color-gray-1000);
-      text-align: center;
-      font-size: var(--size-12);
-      line-height: var(--size-16);
-    }
-  }
-
-  .dev-tools-grabbing {
-    cursor: grabbing;
-
-    > * {
-      pointer-events: none;
-    }
-  }
-`
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/segments-explorer.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/segments-explorer.tsx
deleted file mode 100644
index 57e8f8eb9875a..0000000000000
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/segments-explorer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { PageSegmentTree } from '../../../overview/segment-explorer'
-import { DevToolsInfo, type DevToolsInfoPropsCore } from './dev-tools-info'
-
-export function SegmentsExplorer({
-  routerType,
-  page,
-  ...props
-}: DevToolsInfoPropsCore &
-  React.HTMLProps<HTMLDivElement> & {
-    routerType: 'app' | 'pages'
-    page: string
-  }) {
-  const isAppRouter = routerType === 'app'
-  return (
-    <DevToolsInfo title="Route Info" {...props}>
-      <div data-nextjs-segments-explorer style={{ margin: '-16px' }}>
-        <PageSegmentTree isAppRouter={isAppRouter} page={page} />
-      </div>
-    </DevToolsInfo>
-  )
-}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.stories.tsx
deleted file mode 100644
index 276505b3d631b..0000000000000
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.stories.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { NextLogo } from './next-logo'
-import { withShadowPortal } from '../../../storybook/with-shadow-portal'
-
-const meta: Meta<typeof NextLogo> = {
-  component: NextLogo,
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    'aria-label': 'Open Next.js DevTools',
-    onClick: () => console.log('Clicked!'),
-  },
-  decorators: [withShadowPortal],
-}
-
-export default meta
-type Story = StoryObj<typeof NextLogo>
-
-export const NoIssues: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
-}
-
-export const SingleIssue: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
-}
-
-export const MultipleIssues: Story = {
-  args: {
-    issueCount: 5,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
-}
-
-export const ManyIssues: Story = {
-  args: {
-    issueCount: 99,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
-}
-
-export const Building: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: true,
-    isDevRendering: false,
-  },
-}
-
-export const BuildingWithError: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: true,
-    isDevRendering: false,
-  },
-}
-
-export const Rendering: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: false,
-    isDevRendering: true,
-  },
-}
-
-export const RenderingWithError: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: false,
-    isDevRendering: true,
-  },
-}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.tsx
deleted file mode 100644
index 6f59f4c7a1cfb..0000000000000
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/next-logo.tsx
+++ /dev/null
@@ -1,598 +0,0 @@
-import { forwardRef, useEffect, useRef, useState } from 'react'
-import { css } from '../../../utils/css'
-import mergeRefs from '../../../utils/merge-refs'
-import type { DevToolsScale } from './dev-tools-info/preferences'
-import { useMinimumLoadingTimeMultiple } from '../../devtools-indicator/hooks/use-minimum-loading-time-multiple'
-import { useUpdateAnimation } from '../../devtools-indicator/hooks/use-update-animation'
-import { useMeasureWidth } from '../../devtools-indicator/hooks/use-measure-width'
-
-interface Props extends React.ComponentProps<'button'> {
-  issueCount: number
-  isDevBuilding: boolean
-  isDevRendering: boolean
-  isBuildError: boolean
-  onTriggerClick: () => void
-  toggleErrorOverlay: () => void
-  scale: DevToolsScale
-}
-
-const SHORT_DURATION_MS = 150
-
-export const NextLogo = forwardRef(function NextLogo(
-  {
-    disabled,
-    issueCount,
-    isDevBuilding,
-    isDevRendering,
-    isBuildError,
-    onTriggerClick,
-    toggleErrorOverlay,
-    scale = 1,
-    ...props
-  }: Props,
-  propRef: React.Ref<HTMLButtonElement>
-) {
-  const SIZE = 36 / scale
-
-  const hasError = issueCount > 0
-  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)
-  const [dismissed, setDismissed] = useState(false)
-  const newErrorDetected = useUpdateAnimation(issueCount, SHORT_DURATION_MS)
-
-  const triggerRef = useRef<HTMLButtonElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const measuredWidth = useMeasureWidth(ref)
-
-  const isLoading = useMinimumLoadingTimeMultiple(
-    isDevBuilding || isDevRendering
-  )
-  const isExpanded = isErrorExpanded || disabled
-  const width = measuredWidth === 0 ? 'auto' : measuredWidth
-
-  useEffect(() => {
-    setIsErrorExpanded(hasError)
-  }, [hasError])
-
-  return (
-    <div
-      data-next-badge-root
-      style={
-        {
-          '--size': `${SIZE}px`,
-          '--duration-short': `${SHORT_DURATION_MS}ms`,
-          // if the indicator is disabled, hide the badge
-          // also allow the "disabled" state be dismissed, as long as there are no build errors
-          display: disabled && (!hasError || dismissed) ? 'none' : 'block',
-        } as React.CSSProperties
-      }
-    >
-      {/* Styles */}
-      <style>
-        {css`
-          [data-next-badge-root] {
-            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);
-            --duration-long: 250ms;
-            --color-outer-border: #171717;
-            --color-inner-border: hsla(0, 0%, 100%, 0.14);
-            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);
-            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);
-            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);
-            --mark-size: calc(var(--size) - var(--size-2) * 2);
-
-            --focus-color: var(--color-blue-800);
-            --focus-ring: 2px solid var(--focus-color);
-
-            &:has([data-next-badge][data-error='true']) {
-              --focus-color: #fff;
-            }
-          }
-
-          [data-disabled-icon] {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding-right: 4px;
-          }
-
-          [data-next-badge] {
-            -webkit-font-smoothing: antialiased;
-            width: var(--size);
-            height: var(--size);
-            display: flex;
-            align-items: center;
-            position: relative;
-            background: rgba(0, 0, 0, 0.8);
-            box-shadow:
-              0 0 0 1px var(--color-outer-border),
-              inset 0 0 0 1px var(--color-inner-border),
-              0px 16px 32px -8px rgba(0, 0, 0, 0.24);
-            backdrop-filter: blur(48px);
-            border-radius: var(--rounded-full);
-            user-select: none;
-            cursor: pointer;
-            scale: 1;
-            overflow: hidden;
-            will-change: scale, box-shadow, width, background;
-            transition:
-              scale var(--duration-short) var(--timing),
-              width var(--duration-long) var(--timing),
-              box-shadow var(--duration-long) var(--timing),
-              background var(--duration-short) ease;
-
-            &:active[data-error='false'] {
-              scale: 0.95;
-            }
-
-            &[data-animate='true']:not(:hover) {
-              scale: 1.02;
-            }
-
-            &[data-error='false']:has([data-next-mark]:focus-visible) {
-              outline: var(--focus-ring);
-              outline-offset: 3px;
-            }
-
-            &[data-error='true'] {
-              background: #ca2a30;
-              --color-inner-border: #e5484d;
-
-              [data-next-mark] {
-                background: var(--color-hover-alpha-error);
-                outline-offset: 0px;
-
-                &:focus-visible {
-                  outline: var(--focus-ring);
-                  outline-offset: -1px;
-                }
-
-                &:hover {
-                  background: var(--color-hover-alpha-error-2);
-                }
-              }
-            }
-
-            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {
-              scale: 1;
-            }
-
-            > div {
-              display: flex;
-            }
-          }
-
-          [data-issues-collapse]:focus-visible {
-            outline: var(--focus-ring);
-          }
-
-          [data-issues]:has([data-issues-open]:focus-visible) {
-            outline: var(--focus-ring);
-            outline-offset: -1px;
-          }
-
-          [data-dot] {
-            content: '';
-            width: var(--size-8);
-            height: var(--size-8);
-            background: #fff;
-            box-shadow: 0 0 0 1px var(--color-outer-border);
-            border-radius: 50%;
-            position: absolute;
-            top: 2px;
-            right: 0px;
-            scale: 0;
-            pointer-events: none;
-            transition: scale 200ms var(--timing);
-            transition-delay: var(--duration-short);
-          }
-
-          [data-issues] {
-            --padding-left: 8px;
-            display: flex;
-            gap: 2px;
-            align-items: center;
-            padding-left: 8px;
-            padding-right: 8px;
-            height: var(--size-32);
-            margin-right: 2px;
-            border-radius: var(--rounded-full);
-            transition: background var(--duration-short) ease;
-
-            &:has([data-issues-open]:hover) {
-              background: var(--color-hover-alpha-error);
-            }
-
-            &:has([data-issues-collapse]) {
-              padding-right: calc(var(--padding-left) / 2);
-            }
-
-            [data-cross] {
-              translate: 0px -1px;
-            }
-          }
-
-          [data-issues-open] {
-            font-size: var(--size-13);
-            color: white;
-            width: fit-content;
-            height: 100%;
-            display: flex;
-            gap: 2px;
-            align-items: center;
-            margin: 0;
-            line-height: var(--size-36);
-            font-weight: 500;
-            z-index: 2;
-            white-space: nowrap;
-
-            &:focus-visible {
-              outline: 0;
-            }
-          }
-
-          [data-issues-collapse] {
-            width: var(--size-24);
-            height: var(--size-24);
-            border-radius: var(--rounded-full);
-            transition: background var(--duration-short) ease;
-
-            &:hover {
-              background: var(--color-hover-alpha-error);
-            }
-          }
-
-          [data-cross] {
-            color: #fff;
-            width: var(--size-12);
-            height: var(--size-12);
-          }
-
-          [data-next-mark] {
-            width: var(--mark-size);
-            height: var(--mark-size);
-            margin: 0 2px;
-            display: flex;
-            align-items: center;
-            border-radius: var(--rounded-full);
-            transition: background var(--duration-long) var(--timing);
-
-            &:focus-visible {
-              outline: 0;
-            }
-
-            &:hover {
-              background: var(--color-hover-alpha-subtle);
-            }
-
-            svg {
-              flex-shrink: 0;
-              width: var(--size-40);
-              height: var(--size-40);
-            }
-          }
-
-          [data-issues-count-animation] {
-            display: grid;
-            place-items: center center;
-            font-variant-numeric: tabular-nums;
-
-            &[data-animate='false'] {
-              [data-issues-count-exit],
-              [data-issues-count-enter] {
-                animation-duration: 0ms;
-              }
-            }
-
-            > * {
-              grid-area: 1 / 1;
-            }
-
-            [data-issues-count-exit] {
-              animation: fadeOut 300ms var(--timing) forwards;
-            }
-
-            [data-issues-count-enter] {
-              animation: fadeIn 300ms var(--timing) forwards;
-            }
-          }
-
-          [data-issues-count-plural] {
-            display: inline-block;
-            &[data-animate='true'] {
-              animation: fadeIn 300ms var(--timing) forwards;
-            }
-          }
-
-          .path0 {
-            animation: draw0 1.5s ease-in-out infinite;
-          }
-
-          .path1 {
-            animation: draw1 1.5s ease-out infinite;
-            animation-delay: 0.3s;
-          }
-
-          .paused {
-            stroke-dashoffset: 0;
-          }
-
-          @keyframes fadeIn {
-            0% {
-              opacity: 0;
-              filter: blur(2px);
-              transform: translateY(8px);
-            }
-            100% {
-              opacity: 1;
-              filter: blur(0px);
-              transform: translateY(0);
-            }
-          }
-
-          @keyframes fadeOut {
-            0% {
-              opacity: 1;
-              filter: blur(0px);
-              transform: translateY(0);
-            }
-            100% {
-              opacity: 0;
-              transform: translateY(-12px);
-              filter: blur(2px);
-            }
-          }
-
-          @keyframes draw0 {
-            0%,
-            25% {
-              stroke-dashoffset: -29.6;
-            }
-            25%,
-            50% {
-              stroke-dashoffset: 0;
-            }
-            50%,
-            75% {
-              stroke-dashoffset: 0;
-            }
-            75%,
-            100% {
-              stroke-dashoffset: 29.6;
-            }
-          }
-
-          @keyframes draw1 {
-            0%,
-            20% {
-              stroke-dashoffset: -11.6;
-            }
-            20%,
-            50% {
-              stroke-dashoffset: 0;
-            }
-            50%,
-            75% {
-              stroke-dashoffset: 0;
-            }
-            75%,
-            100% {
-              stroke-dashoffset: 11.6;
-            }
-          }
-
-          @media (prefers-reduced-motion) {
-            [data-issues-count-exit],
-            [data-issues-count-enter],
-            [data-issues-count-plural] {
-              animation-duration: 0ms !important;
-            }
-          }
-        `}
-      </style>
-      <div
-        data-next-badge
-        data-error={hasError}
-        data-error-expanded={isExpanded}
-        data-animate={newErrorDetected}
-        style={{ width }}
-      >
-        <div ref={ref}>
-          {/* Children */}
-          {!disabled && (
-            <button
-              ref={mergeRefs(triggerRef, propRef)}
-              data-next-mark
-              data-next-mark-loading={isLoading}
-              onClick={onTriggerClick}
-              {...props}
-            >
-              <NextMark isLoading={isLoading} isDevBuilding={isDevBuilding} />
-            </button>
-          )}
-          {isExpanded && (
-            <div data-issues>
-              <button
-                data-issues-open
-                aria-label="Open issues overlay"
-                onClick={toggleErrorOverlay}
-              >
-                {disabled && (
-                  <div data-disabled-icon>
-                    <Warning />
-                  </div>
-                )}
-                <AnimateCount
-                  // Used the key to force a re-render when the count changes.
-                  key={issueCount}
-                  animate={newErrorDetected}
-                  data-issues-count-animation
-                >
-                  {issueCount}
-                </AnimateCount>{' '}
-                <div>
-                  Issue
-                  {issueCount > 1 && (
-                    <span
-                      aria-hidden
-                      data-issues-count-plural
-                      // This only needs to animate once the count changes from 1 -> 2,
-                      // otherwise it should stay static between re-renders.
-                      data-animate={newErrorDetected && issueCount === 2}
-                    >
-                      s
-                    </span>
-                  )}
-                </div>
-              </button>
-              {!isBuildError && (
-                <button
-                  data-issues-collapse
-                  aria-label="Collapse issues badge"
-                  onClick={() => {
-                    if (disabled) {
-                      setDismissed(true)
-                    } else {
-                      setIsErrorExpanded(false)
-                    }
-                    // Move focus to the trigger to prevent having it stuck on this element
-                    triggerRef.current?.focus()
-                  }}
-                >
-                  <Cross data-cross />
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-      <div aria-hidden data-dot />
-    </div>
-  )
-})
-
-function AnimateCount({
-  children: count,
-  animate = true,
-  ...props
-}: {
-  children: number
-  animate: boolean
-}) {
-  return (
-    <div {...props} data-animate={animate}>
-      <div aria-hidden data-issues-count-exit>
-        {count - 1}
-      </div>
-      <div data-issues-count data-issues-count-enter>
-        {count}
-      </div>
-    </div>
-  )
-}
-
-function NextMark({
-  isLoading,
-  isDevBuilding,
-}: {
-  isLoading?: boolean
-  isDevBuilding?: boolean
-}) {
-  const strokeColor = isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'
-  return (
-    <svg
-      width="40"
-      height="40"
-      viewBox="0 0 40 40"
-      fill="none"
-      data-next-mark-loading={isLoading}
-    >
-      <g transform="translate(8.5, 13)">
-        <path
-          className={isLoading ? 'path0' : 'paused'}
-          d="M13.3 15.2 L2.34 1 V12.6"
-          fill="none"
-          stroke="url(#next_logo_paint0_linear_1357_10853)"
-          strokeWidth="1.86"
-          mask="url(#next_logo_mask0)"
-          strokeDasharray="29.6"
-          strokeDashoffset="29.6"
-        />
-        <path
-          className={isLoading ? 'path1' : 'paused'}
-          d="M11.825 1.5 V13.1"
-          strokeWidth="1.86"
-          stroke="url(#next_logo_paint1_linear_1357_10853)"
-          strokeDasharray="11.6"
-          strokeDashoffset="11.6"
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id="next_logo_paint0_linear_1357_10853"
-          x1="9.95555"
-          y1="11.1226"
-          x2="15.4778"
-          y2="17.9671"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={strokeColor} />
-          <stop offset="0.604072" stopColor={strokeColor} stopOpacity="0" />
-          <stop offset="1" stopColor={strokeColor} stopOpacity="0" />
-        </linearGradient>
-        <linearGradient
-          id="next_logo_paint1_linear_1357_10853"
-          x1="11.8222"
-          y1="1.40039"
-          x2="11.791"
-          y2="9.62542"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={strokeColor} />
-          <stop offset="1" stopColor={strokeColor} stopOpacity="0" />
-        </linearGradient>
-        <mask id="next_logo_mask0">
-          <rect width="100%" height="100%" fill="white" />
-          <rect width="5" height="1.5" fill="black" />
-        </mask>
-      </defs>
-    </svg>
-  )
-}
-
-function Warning() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z"
-        fill="#EAEAEA"
-      />
-    </svg>
-  )
-}
-
-export function Cross(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
index ec9bce0994a86..c923be72bcd65 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -5,13 +5,11 @@ import { ComponentStyles } from './styles/component-styles'
 import { CssReset } from './styles/css-reset'
 import { Colors } from './styles/colors'
 import { ErrorOverlay } from './components/errors/error-overlay/error-overlay'
-import { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator'
 import { RenderError } from './container/runtime-error/render-error'
 import { DarkTheme } from './styles/dark-theme'
-import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
 import type { HydrationErrorState } from '../shared/hydration-error'
 import type { ReadyRuntimeError } from './utils/get-error-by-type'
-import { DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
+import { DevToolsIndicator } from './components/devtools-indicator/devtools-indicator'
 import { PanelRouter } from './menu/panel-router'
 import { PanelRouterContext, type PanelStateKind } from './menu/context'
 import type { OverlayState, OverlayDispatch } from './shared'
@@ -32,9 +30,7 @@ export function DevOverlay({
   dispatch: OverlayDispatch
   getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
 }) {
-  const [scale, setScale] = useDevToolsScale()
   const [panel, setPanel] = useState<null | PanelStateKind>(null)
-  const isBuildError = state.buildError !== null
   const [selectedIndex, setSelectedIndex] = useState(-1)
 
   const triggerRef = useRef<HTMLButtonElement>(null)
@@ -74,32 +70,11 @@ export function DevOverlay({
                         errorCount={totalErrorCount}
                       />
                       <PanelRouter />
-                      <DevToolsIndicatorNew />
+                      <DevToolsIndicator />
                     </PanelRouterContext>
                   </RenderErrorContext>
                 </>
-              ) : (
-                <>
-                  <DevToolsIndicator
-                    scale={scale}
-                    setScale={setScale}
-                    state={state}
-                    dispatch={dispatch}
-                    errorCount={totalErrorCount}
-                    isBuildError={isBuildError}
-                  />
-
-                  <ErrorOverlay
-                    state={state}
-                    dispatch={dispatch}
-                    getSquashedHydrationErrorDetails={
-                      getSquashedHydrationErrorDetails
-                    }
-                    runtimeErrors={runtimeErrors}
-                    errorCount={totalErrorCount}
-                  />
-                </>
-              )}
+              ) : null}
             </>
           )
         }}
diff --git a/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx b/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx
index d3cf3766ef21c..2c0aef5c62b2e 100644
--- a/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx
@@ -1,15 +1,86 @@
 import { useDevOverlayContext } from '../../dev-overlay.browser'
 import { useClickOutsideAndEscape } from '../components/errors/dev-tools-indicator/utils'
-import { useLayoutEffect, useRef, type CSSProperties } from 'react'
+import {
+  useLayoutEffect,
+  useRef,
+  createContext,
+  useContext,
+  type CSSProperties,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
 import { getIndicatorOffset } from '../utils/indicator-metrics'
 import { INDICATOR_PADDING } from '../components/devtools-indicator/devtools-indicator'
-import {
-  MenuContext,
-  MenuItem,
-} from '../components/errors/dev-tools-indicator/dev-tools-indicator'
 import { usePanelRouterContext } from './context'
 import { usePanelContext } from './panel-router'
 
+interface C {
+  closeMenu?: () => void
+  selectedIndex: number
+  setSelectedIndex: Dispatch<SetStateAction<number>>
+}
+
+export const MenuContext = createContext({} as C)
+
+export function MenuItem({
+  index,
+  label,
+  value,
+  onClick,
+  href,
+  ...props
+}: {
+  index?: number
+  title?: string
+  label: string
+  value: React.ReactNode
+  href?: string
+  onClick?: () => void
+}) {
+  const isInteractive =
+    typeof onClick === 'function' || typeof href === 'string'
+  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(MenuContext)
+  const selected = selectedIndex === index
+
+  function click() {
+    if (isInteractive) {
+      onClick?.()
+      closeMenu?.()
+      if (href) {
+        window.open(href, '_blank', 'noopener, noreferrer')
+      }
+    }
+  }
+
+  return (
+    <div
+      className="dev-tools-indicator-item"
+      data-index={index}
+      data-selected={selected}
+      onClick={click}
+      // Needs `onMouseMove` instead of enter to work together
+      // with keyboard and mouse input
+      onMouseMove={() => {
+        if (isInteractive && index !== undefined && selectedIndex !== index) {
+          setSelectedIndex(index)
+        }
+      }}
+      onMouseLeave={() => setSelectedIndex(-1)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          click()
+        }
+      }}
+      role={isInteractive ? 'menuitem' : undefined}
+      tabIndex={selected ? 0 : -1}
+      {...props}
+    >
+      <span className="dev-tools-indicator-label">{label}</span>
+      <span className="dev-tools-indicator-value">{value}</span>
+    </div>
+  )
+}
+
 export const DevtoolMenu = ({
   closeOnClickOutside = true,
   items,
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
index 5da9845603d2d..e22167196d144 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
@@ -12,7 +12,6 @@ import { styles as containerErrorStyles } from '../container/errors'
 import { styles as containerRuntimeErrorStyles } from '../container/runtime-error'
 import { COPY_BUTTON_STYLES } from '../components/copy-button'
 import { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'
-import { DEV_TOOLS_INDICATOR_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-indicator'
 import { css } from '../utils/css'
 import { EDITOR_LINK_STYLES } from '../components/terminal/editor-link'
 import { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-name-label/environment-name-label'
@@ -48,7 +47,6 @@ export function ComponentStyles() {
         ${containerRuntimeErrorStyles}
         ${versionStaleness}
         ${RESTART_SERVER_BUTTON_STYLES}
-        ${DEV_TOOLS_INDICATOR_STYLES}
         ${DEV_TOOLS_INFO_STYLES}
         ${DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES}
         ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}

From 719bc5e71bdcf4881e71ec54e1cdffa19e32f455 Mon Sep 17 00:00:00 2001
From: nextjs-bot <it+nextjs-bot@vercel.com>
Date: Wed, 16 Jul 2025 23:24:53 +0000
Subject: [PATCH 7/7] v15.4.2-canary.5

---
 lerna.json                                   |  2 +-
 packages/create-next-app/package.json        |  2 +-
 packages/eslint-config-next/package.json     |  4 ++--
 packages/eslint-plugin-internal/package.json |  2 +-
 packages/eslint-plugin-next/package.json     |  2 +-
 packages/font/package.json                   |  2 +-
 packages/next-bundle-analyzer/package.json   |  2 +-
 packages/next-codemod/package.json           |  2 +-
 packages/next-env/package.json               |  2 +-
 packages/next-mdx/package.json               |  2 +-
 packages/next-plugin-storybook/package.json  |  2 +-
 packages/next-polyfill-module/package.json   |  2 +-
 packages/next-polyfill-nomodule/package.json |  2 +-
 packages/next-rspack/package.json            |  2 +-
 packages/next-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-refresh-utils/package.json    |  2 +-
 packages/third-parties/package.json          |  4 ++--
 pnpm-lock.yaml                               | 16 ++++++++--------
 19 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/lerna.json b/lerna.json
index 44709b88cbc6d..96d5e513d6587 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "15.4.2-canary.4"
+  "version": "15.4.2-canary.5"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index aedb243b132bc..3f521084f9754 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index bdc59188f0008..d9ac03cdcceda 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/api-reference/config/eslint",
   "dependencies": {
-    "@next/eslint-plugin-next": "15.4.2-canary.4",
+    "@next/eslint-plugin-next": "15.4.2-canary.5",
     "@rushstack/eslint-patch": "^1.10.3",
     "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
diff --git a/packages/eslint-plugin-internal/package.json b/packages/eslint-plugin-internal/package.json
index eedc51d8d1a1b..8d7fc52a0e047 100644
--- a/packages/eslint-plugin-internal/package.json
+++ b/packages/eslint-plugin-internal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@next/eslint-plugin-internal",
   "private": true,
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "ESLint plugin for working on Next.js.",
   "exports": {
     ".": "./src/eslint-plugin-internal.js"
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index d49f2fe83f721..975aff1c7612b 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/font/package.json b/packages/font/package.json
index 30906e24c5e4f..484bb7b86c8d8 100644
--- a/packages/font/package.json
+++ b/packages/font/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@next/font",
   "private": true,
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 0faf2423cbe6e..26d0f98580e82 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 609f49c56794d..25871e87561d2 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 0e7a6ec1561d2..a7fc3d0523a88 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index ec3e45ecbb2bc..219c5621ed5fa 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 0fabbca3302f6..29bc57f89cdba 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 37370f5169984..8a89968d8835e 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 0b2d84c72c446..2ece330214b32 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-rspack/package.json b/packages/next-rspack/package.json
index ff957f9b390df..b50903e139b6c 100644
--- a/packages/next-rspack/package.json
+++ b/packages/next-rspack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-rspack",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-rspack"
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 0cc946902c44f..0e369d04b8146 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "private": true,
   "files": [
     "native/"
diff --git a/packages/next/package.json b/packages/next/package.json
index 49d9dc7460623..a9b7c7d28bfea 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -100,7 +100,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "15.4.2-canary.4",
+    "@next/env": "15.4.2-canary.5",
     "@swc/helpers": "0.5.15",
     "caniuse-lite": "^1.0.30001579",
     "postcss": "8.4.31",
@@ -163,11 +163,11 @@
     "@jest/types": "29.5.0",
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/triples": "1.2.0",
-    "@next/font": "15.4.2-canary.4",
-    "@next/polyfill-module": "15.4.2-canary.4",
-    "@next/polyfill-nomodule": "15.4.2-canary.4",
-    "@next/react-refresh-utils": "15.4.2-canary.4",
-    "@next/swc": "15.4.2-canary.4",
+    "@next/font": "15.4.2-canary.5",
+    "@next/polyfill-module": "15.4.2-canary.5",
+    "@next/polyfill-nomodule": "15.4.2-canary.5",
+    "@next/react-refresh-utils": "15.4.2-canary.5",
+    "@next/swc": "15.4.2-canary.5",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.51.1",
     "@rspack/core": "1.4.5",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 174bc90b18c98..09eb0bdc987f0 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
index 182c3e5523d0d..0bdbd53085e4e 100644
--- a/packages/third-parties/package.json
+++ b/packages/third-parties/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "15.4.2-canary.4",
+  "version": "15.4.2-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -26,7 +26,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "15.4.2-canary.4",
+    "next": "15.4.2-canary.5",
     "outdent": "0.8.0",
     "prettier": "2.5.1",
     "typescript": "5.8.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1cbf779ae7932..90d197feab7a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -854,7 +854,7 @@ importers:
   packages/eslint-config-next:
     dependencies:
       '@next/eslint-plugin-next':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../eslint-plugin-next
       '@rushstack/eslint-patch':
         specifier: ^1.10.3
@@ -924,7 +924,7 @@ importers:
   packages/next:
     dependencies:
       '@next/env':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../next-env
       '@swc/helpers':
         specifier: 0.5.15
@@ -1046,19 +1046,19 @@ importers:
         specifier: 1.2.0
         version: 1.2.0
       '@next/font':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../font
       '@next/polyfill-module':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../next-polyfill-module
       '@next/polyfill-nomodule':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../next-polyfill-nomodule
       '@next/react-refresh-utils':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../react-refresh-utils
       '@next/swc':
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../next-swc
       '@opentelemetry/api':
         specifier: 1.6.0
@@ -1758,7 +1758,7 @@ importers:
         version: 1.0.20
     devDependencies:
       next:
-        specifier: 15.4.2-canary.4
+        specifier: 15.4.2-canary.5
         version: link:../next
       outdent:
         specifier: 0.8.0