[dev-overlay] Remove old Dev Overlay (vercel#76256)

This PR removed the old overlay including the deprecated `buildActivity` and `appIsrStatus` options. Closes NDX-785 Closes NDX-855 Closes NDX-865 Closes NDX-866 Closes NDX-867 Closes NDX-868
eps1lon · Feb 20, 2025 · a89d55c · a89d55c
1 parent c8ac0bd
commit a89d55c
Show file tree

Hide file tree

Showing 54 changed files with 168 additions and 1,334 deletions.
diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml
@@ -581,7 +581,7 @@ jobs:
     uses: ./.github/workflows/build_reusable.yml
     with:
       nodeVersion: 18.18.2
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
       stepName: 'test-ppr-integration'
     secrets: inherit
 
@@ -596,7 +596,7 @@ jobs:
         group: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
     uses: ./.github/workflows/build_reusable.yml
     with:
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
       stepName: 'test-ppr-dev-${{ matrix.group }}'
     secrets: inherit
 
@@ -611,7 +611,7 @@ jobs:
         group: [1/7, 2/7, 3/7, 4/7, 5/7, 6/7, 7/7]
     uses: ./.github/workflows/build_reusable.yml
     with:
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
       stepName: 'test-ppr-prod-${{ matrix.group }}'
     secrets: inherit
 

diff --git a/crates/next-build-test/nextConfig.json b/crates/next-build-test/nextConfig.json
@@ -37,7 +37,6 @@
     "unoptimized": false
   },
   "devIndicators": {
-    "buildActivity": true,
     "buildActivityPosition": "bottom-right"
   },
   "onDemandEntries": {

diff --git a/crates/next-core/src/next_config.rs b/crates/next-core/src/next_config.rs
@@ -213,7 +213,6 @@ pub enum BuildActivityPositions {
 )]
 #[serde(rename_all = "camelCase")]
 pub struct DevIndicatorsOptions {
-    pub build_activity: Option<bool>,
     pub build_activity_position: Option<BuildActivityPositions>,
     pub position: Option<BuildActivityPositions>,
 }

diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx b/docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx
@@ -11,78 +11,13 @@ description: Optimized pages include an indicator to let you know if it's being
 
 ```ts filename="Types"
   devIndicators: {
-    appIsrStatus?: boolean, // defaults to true
-    buildActivity?: boolean, // defaults to true
     buildActivityPosition?: 'bottom-right'
     | 'bottom-left'
     | 'top-right'
     | 'top-left', // defaults to 'bottom-right'
   },
 ```
 
-## `appIsrStatus` (Static Indicator)
-
-Next.js displays a static indicator in the bottom corner of the screen that signals if a route will be prerendered at build time. This makes it easier to understand whether a route is static or dynamic, and for you to identify if a route [opts out of static rendering](#static-route-not-showing-the-indicator).
-
-<Image
-  alt="App Folder Structure"
-  srcLight="/docs/light/static-indicator.png"
-  srcDark="/docs/dark/static-indicator.png"
-  width="1600"
-  height="208"
-/>
-
-You can temporarily hide the indicator by clicking the close indicator which will remember your preference in `localStorage` for 1 hour. To permanently disable it, you can use the config option in `next.config.js`:
-
-```ts filename="next.config.ts" switcher
-import type { NextConfig } from 'next'
-
-const nextConfig: NextConfig = {
-  devIndicators: {
-    appIsrStatus: false,
-  },
-}
-
-export default nextConfig
-```
-
-```js filename="next.config.js" switcher
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  devIndicators: {
-    appIsrStatus: false,
-  },
-}
-
-module.exports = nextConfig
-```
-
-## `buildActivity` (Compilation Indicator)
-
-When you edit your code, and Next.js is compiling the application, a compilation indicator appears in the bottom right corner of the page.
-
-> **Good to know**: This indicator is only present in development mode and will not appear when building and running the app in production mode.
-
-In some cases this indicator can be misplaced on your page, for example, when conflicting with a chat launcher. To change its position, open `next.config.js` and set the `buildActivityPosition` in the `devIndicators` object to `bottom-right` (default), `bottom-left`, `top-right` or `top-left`:
-
-```js filename="next.config.js"
-module.exports = {
-  devIndicators: {
-    buildActivityPosition: 'bottom-right',
-  },
-}
-```
-
-In some cases, this indicator might not be useful for you. To remove it, open `next.config.js` and disable the `buildActivity` config in `devIndicators` object:
-
-```js filename="next.config.js"
-module.exports = {
-  devIndicators: {
-    buildActivity: false,
-  },
-}
-```
-
 ## Troubleshooting
 
 ### Static route not showing the indicator

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -2179,10 +2179,6 @@ export default async function getBaseWebpackConfig(
     crossOrigin: config.crossOrigin,
     pageExtensions: pageExtensions,
     trailingSlash: config.trailingSlash,
-    buildActivity:
-      config.devIndicators === false
-        ? false
-        : config.devIndicators.buildActivity,
     buildActivityPosition:
       config.devIndicators === false
         ? undefined

diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -185,9 +185,6 @@ export function getDefineEnv({
     'process.env.__NEXT_APP_NAV_FAIL_HANDLING': Boolean(
       config.experimental.appNavFailHandling
     ),
-    'process.env.__NEXT_APP_ISR_INDICATOR': Boolean(
-      config.devIndicators === false ? false : config.devIndicators.appIsrStatus
-    ),
     'process.env.__NEXT_PPR': isPPREnabled,
     'process.env.__NEXT_DYNAMIC_IO': isDynamicIOEnabled,
     'process.env.__NEXT_USE_CACHE': isUseCacheEnabled,
@@ -237,10 +234,6 @@ export function getDefineEnv({
         }
       : {}),
     'process.env.__NEXT_TRAILING_SLASH': config.trailingSlash,
-    'process.env.__NEXT_BUILD_INDICATOR':
-      config.devIndicators === false
-        ? false
-        : config.devIndicators.buildActivity ?? true,
     'process.env.__NEXT_DEV_INDICATOR': config.devIndicators !== false,
     'process.env.__NEXT_DEV_INDICATOR_POSITION':
       config.devIndicators === false
@@ -296,8 +289,6 @@ export function getDefineEnv({
             needsExperimentalReact(config),
         }
       : undefined),
-    'process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY':
-      config.experimental.newDevOverlay || false,
   }
 
   const userDefines = config.compiler?.define ?? {}

diff --git a/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -4,7 +4,7 @@ import type { OverlayState } from '../../../../../shared'
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
 import { NextLogo } from './internal/next-logo'
-import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'
+import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize'
 import { useIsDevRendering } from './internal/dev-render-indicator'
 import { useDelayedRender } from '../../../hooks/use-delayed-render'
 import { noop as css } from '../../../helpers/noop-template'

diff --git a/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx b/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx
@@ -341,10 +341,7 @@ function processMessage(
 
   switch (obj.action) {
     case HMR_ACTIONS_SENT_TO_BROWSER.APP_ISR_MANIFEST: {
-      if (
-        process.env.__NEXT_APP_ISR_INDICATOR ||
-        process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY
-      ) {
+      if (process.env.__NEXT_DEV_INDICATOR) {
         if (appIsrManifestRef) {
           appIsrManifestRef.current = obj.data
 
@@ -353,24 +350,7 @@ function processMessage(
           // as we'll receive the updated manifest before usePathname
           // triggers for new value
           if ((pathnameRef.current as string) in obj.data) {
-            if (process.env.__NEXT_APP_ISR_INDICATOR) {
-              // the indicator can be hidden for an hour.
-              // check if it's still hidden
-              const indicatorHiddenAt = Number(
-                localStorage?.getItem('__NEXT_DISMISS_PRERENDER_INDICATOR')
-              )
-
-              const isHidden =
-                indicatorHiddenAt &&
-                !isNaN(indicatorHiddenAt) &&
-                Date.now() < indicatorHiddenAt
-
-              if (!isHidden) {
-                dispatcher.onStaticIndicator(true)
-              }
-            } else if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY) {
-              dispatcher.onStaticIndicator(true)
-            }
+            dispatcher.onStaticIndicator(true)
           } else {
             dispatcher.onStaticIndicator(false)
           }
@@ -650,10 +630,7 @@ export default function HotReload({
   const appIsrManifestRef = useRef<Record<string, false | number>>({})
   const pathnameRef = useRef(pathname)
 
-  if (
-    process.env.__NEXT_APP_ISR_INDICATOR ||
-    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY
-  ) {
+  if (process.env.__NEXT_DEV_INDICATOR) {
     // this conditional is only for dead-code elimination which
     // isn't a runtime conditional only build-time so ignore hooks rule
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -665,22 +642,7 @@ export default function HotReload({
       if (appIsrManifest) {
         if (pathname && pathname in appIsrManifest) {
           try {
-            if (process.env.__NEXT_APP_ISR_INDICATOR) {
-              const indicatorHiddenAt = Number(
-                localStorage?.getItem('__NEXT_DISMISS_PRERENDER_INDICATOR')
-              )
-
-              const isHidden =
-                indicatorHiddenAt &&
-                !isNaN(indicatorHiddenAt) &&
-                Date.now() < indicatorHiddenAt
-
-              if (!isHidden) {
-                dispatcher.onStaticIndicator(true)
-              }
-            } else if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY) {
-              dispatcher.onStaticIndicator(true)
-            }
+            dispatcher.onStaticIndicator(true)
           } catch (reason) {
             let message = ''
 
@@ -742,11 +704,7 @@ export default function HotReload({
 
   if (shouldRenderErrorOverlay) {
     return (
-      <ReactDevOverlay
-        state={state}
-        dispatcher={dispatcher}
-        globalError={globalError}
-      >
+      <ReactDevOverlay state={state} globalError={globalError}>
         {children}
       </ReactDevOverlay>
     )

diff --git a/packages/next/src/client/components/react-dev-overlay/app/old-react-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/app/old-react-dev-overlay.tsx
diff --git a/packages/next/src/client/components/react-dev-overlay/app/react-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/app/react-dev-overlay.tsx
@@ -1,6 +1,3 @@
-import OldReactDevOverlay from './old-react-dev-overlay'
 import NewReactDevOverlay from '../_experimental/app/react-dev-overlay'
 
-export default Boolean(process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY)
-  ? NewReactDevOverlay
-  : OldReactDevOverlay
+export default NewReactDevOverlay