[dev-overlay]: update docs for devIndicators & outdated screenshot (#…

…76463)

- Updates the `devIndicators` documentation to reflect the new API
- Removes an outdated screenshot for explaining how to use the Node.js
inspector -- the image itself wasn't adding much clarity and having to
keep it in sync with UI updates isn't ideal.

Closes DOC-4281
Closes DOC-4282

docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx

@@ -151,15 +151,7 @@ Debugging server-side code works similarly to client-side debugging. When search
 
 When you encounter an error, inspecting the source code can help trace the root cause of errors.
 
-Next.js will display a Node.js logo like a green button on the dev overlay. By clicking that button, the DevTools URL is copied to your clipboard. You can open a new browser tab with that URL to inspect the Next.js server process.
-
-<Image
-  alt="Copy DevTools url example"
-  srcLight="/docs/dark/copy-devtool-url-example.png"
-  srcDark="/docs/dark/copy-devtool-url-example.png"
-  width="1600"
-  height="594"
-/>
+Next.js will display a Node.js icon underneath the Next.js version indicator on the error overlay. By clicking that icon, the DevTools URL is copied to your clipboard. You can open a new browser tab with that URL to inspect the Next.js server process.
 
 ### Debugging on Windows
 

docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx

@@ -1,28 +1,26 @@
 ---
 title: devIndicators
-description: Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.
+description: Configuration options for the on-screen indicator that gives context about the current route you're viewing during development.
 ---
 
-{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
-
-<AppOnly>
-
-`devIndicators` allows you to configure the on-screen indicators that give context about the current route you're viewing during development.
+`devIndicators` allows you to configure the on-screen indicator that gives context about the current route you're viewing during development.
 
 ```ts filename="Types"
-  devIndicators: {
-    buildActivityPosition?: 'bottom-right'
+  devIndicators: false | {
+    position?: 'bottom-right'
     | 'bottom-left'
     | 'top-right'
-    | 'top-left', // defaults to 'bottom-right'
+    | 'top-left', // defaults to 'bottom-left',
   },
 ```
 
+Setting `devIndicators` to `false` will hide the indicator, however Next.js will continue to surface any build or runtime errors that were encountered.
+
 ## Troubleshooting
 
-### Static route not showing the indicator
+### Indicator not marking a route as static
 
-If you expect a route to be static and the indicator is enabled but not showing, it's likely the route has opted out of static rendering.
+If you expect a route to be static and the indicator has marked it as dynamic, it's likely the route has opted out of static rendering.
 
 You can confirm if a route is [static](/docs/app/building-your-application/rendering/server-components#static-rendering-default) or [dynamic](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) by building your application using `next build --debug`, and checking the output in your terminal. Static (or prerendered) routes will display a `○` symbol, whereas dynamic routes will display a `ƒ` symbol. For example:
 
@@ -35,6 +33,8 @@ Route (app)                              Size     First Load JS
 ƒ  (Dynamic)  server-rendered on demand
 ```
 
+<AppOnly>
+
 There are two reasons a route might opt out of static rendering:
 
 - The presence of [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis) which rely on runtime information.
@@ -46,20 +46,6 @@ Check your route for any of these conditions, and if you are not able to statica
 
 <PagesOnly>
 
-> **Good to know**: This indicator was removed in Next.js version 10.0.1. We recommend upgrading to the latest version of Next.js.
-
-When a page qualifies for [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization) we show an indicator to let you know.
-
-This is helpful since automatic static optimization can be very beneficial and knowing immediately in development if the page qualifies can be useful.
-
-In some cases this indicator might not be useful, like when working on electron applications. To remove it open `next.config.js` and disable the `autoPrerender` config in `devIndicators`:
-
-```js filename="next.config.js"
-module.exports = {
-  devIndicators: {
-    autoPrerender: false,
-  },
-}
-```
+When exporting [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) from a page, it will be marked as dynamic.
 
 </PagesOnly>

packages/next/src/server/config-shared.ts

@@ -823,13 +823,13 @@ export interface NextConfig extends Record<string, any> {
     | false
     | {
         /**
-         * @deprecated The dev tools indicator has it enabled by default.
+         * @deprecated The dev tools indicator has it enabled by default. To disable, set `devIndicators` to `false`.
          * */
         appIsrStatus?: boolean
 
         /**
          * Show "building..." indicator in development
-         * @deprecated The dev tools indicator has it enabled by default.
+         * @deprecated The dev tools indicator has it enabled by default. To disable, set `devIndicators` to `false`.
          */
         buildActivity?: boolean