[dev-tools] Initial support for viewing static params of current route from generateStaticParams

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -18,6 +18,7 @@ export type DevToolsClientState = DevToolsServerState & {
     staticIndicator: boolean
     isReady: boolean
   }
+  staticPathsInfo: DevToolsServerState['staticPathsInfo']
 }
 
 export interface OverlayState {
@@ -129,6 +130,12 @@ export const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {
   devToolsClientState: {
     versionInfo: { installed: '0.0.0', staleness: 'unknown' },
     debugInfo: { devtoolsFrontendUrl: undefined },
+    staticPathsInfo: {
+      page: '',
+      pathname: '',
+      staticPaths: [],
+      isPageIncludedInStaticPaths: false,
+    },
     devIndicator: {
       staticIndicator: false,
       isDisabled: false,

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -60,6 +60,12 @@ const state: OverlayState = {
       isDisabled: false,
       disabledUntil: 0,
     },
+    staticPathsInfo: {
+      page: '',
+      pathname: '',
+      staticPaths: [],
+      isPageIncludedInStaticPaths: false,
+    },
   },
 }
 

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -45,6 +45,12 @@ export function DevToolsIndicator({
   const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =
     useState(true)
 
+  // Using __NEXT_DEVTOOLS_CLIENT_STATE to avoid prop drilling.
+  window.__NEXT_DEVTOOLS_CLIENT_STATE = {
+    ...window.__NEXT_DEVTOOLS_CLIENT_STATE,
+    staticPathsInfo: state.devToolsClientState.staticPathsInfo,
+  }
+
   return (
     <DevToolsPopover
       routerType={state.routerType}

packages/next/src/client/components/react-dev-overlay/ui/components/overview/segment-explorer.tsx

@@ -79,6 +79,14 @@ function PageSegmentTreeLayerPresentation({
   const nodeName = node.value?.type
   const pagePathPrefix = segments.slice(0, -1).join('/')
 
+  const staticPathsInfo = window.__NEXT_DEVTOOLS_CLIENT_STATE?.staticPathsInfo
+  const staticPaths =
+    staticPathsInfo &&
+    nodeName === 'page' &&
+    staticPathsInfo.pathname === `/${pagePathPrefix}`
+      ? staticPathsInfo.staticPaths
+      : []
+
   return (
     <div className="segment-explorer-item">
       {!fileName || level === 0 ? null : (
@@ -95,6 +103,11 @@ function PageSegmentTreeLayerPresentation({
               </span>
               {pagePathPrefix === '' ? '' : `${pagePathPrefix}/`}
               <span className="segment-explorer-filename-path">{fileName}</span>
+              <div>
+                {staticPaths.map((path) => (
+                  <div key={path}>{path}</div>
+                ))}
+              </div>
             </div>
           </div>
         </div>
@@ -160,6 +173,28 @@ export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
     overflow-y: auto;
     padding: 0 12px;
     font-size: var(--size-14);
+    max-height: 500px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      border-radius: 0 0 1rem 1rem;
+      margin-bottom: 1rem;
+    }
+
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 0 0 1rem 1rem;
+      background-color: var(--color-background-100);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 1rem;
+      background-color: var(--color-gray-500);
+    }
   }
 
   .segment-explorer-item-row {

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -34,6 +34,12 @@ const state: OverlayState = {
       isDisabled: false,
       disabledUntil: 0,
     },
+    staticPathsInfo: {
+      page: '',
+      pathname: '',
+      staticPaths: [],
+      isPageIncludedInStaticPaths: false,
+    },
   },
   errors: [
     {

packages/next/src/server/base-server.ts

@@ -177,6 +177,7 @@ import { InvariantError } from '../shared/lib/invariant-error'
 import { decodeQueryPathParameter } from './lib/decode-query-path-parameter'
 import { getCacheHandlers } from './use-cache/handlers'
 import { fixMojibake } from './lib/fix-mojibake'
+import { devToolsServerState } from './dev/dev-tools-server-state'
 
 export type FindComponentsResult = {
   components: LoadComponentsReturnType
@@ -3060,6 +3061,15 @@ export default abstract class Server<
       const isPageIncludedInStaticPaths =
         staticPathKey && staticPaths?.includes(staticPathKey)
 
+      if (isPageIncludedInStaticPaths) {
+        devToolsServerState.staticPathsInfo = {
+          page: components.page,
+          pathname,
+          staticPaths: staticPaths ?? [],
+          isPageIncludedInStaticPaths: !!isPageIncludedInStaticPaths,
+        }
+      }
+
       // When experimental compile is used, no pages have been prerendered,
       // so they should all be blocking.
 

packages/next/src/server/dev/dev-tools-server-state.ts

@@ -8,6 +8,12 @@ export type DevToolsServerState = {
   }
   versionInfo: VersionInfo
   debugInfo: DebugInfo
+  staticPathsInfo: {
+    page: string
+    pathname: string
+    staticPaths: string[]
+    isPageIncludedInStaticPaths: boolean
+  }
 }
 
 export const devToolsServerState: DevToolsServerState = {
@@ -22,4 +28,10 @@ export const devToolsServerState: DevToolsServerState = {
   debugInfo: {
     devtoolsFrontendUrl: undefined,
   },
+  staticPathsInfo: {
+    page: '',
+    pathname: '',
+    staticPaths: [],
+    isPageIncludedInStaticPaths: false,
+  },
 }

packages/next/src/server/dev/hot-middleware.ts

@@ -228,6 +228,7 @@ export class WebpackHotMiddleware {
             devtoolsFrontendUrl: this.devtoolsFrontendUrl,
           },
           devIndicator: devToolsServerState.devIndicator,
+          staticPathsInfo: devToolsServerState.staticPathsInfo,
         },
       })
     }

packages/next/src/server/dev/hot-reloader-turbopack.ts

@@ -864,6 +864,7 @@ export async function createHotReloaderTurbopack(
               debugInfo: {
                 devtoolsFrontendUrl,
               },
+              staticPathsInfo: devToolsServerState.staticPathsInfo,
             },
           }
 

packages/next/src/server/dev/hot-reloader-types.ts

@@ -60,6 +60,7 @@ export interface SyncAction {
     debugInfo: DebugInfo
     versionInfo: VersionInfo
     devIndicator: DevToolsServerState['devIndicator']
+    staticPathsInfo: DevToolsServerState['staticPathsInfo']
   }
 }
 interface BuiltAction {

packages/next/src/shared/lib/devtool/app-segment-tree.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useEffect, useSyncExternalStore } from 'react'
+import type { OverlayState } from '../../../client/components/react-dev-overlay/shared'
 import { createTrie, type Trie } from './trie'
 
 export type SegmentNode = {
@@ -10,6 +11,7 @@ export type SegmentNode = {
 
 type DevtoolClientState = {
   tree?: Trie<SegmentNode>
+  staticPathsInfo?: OverlayState['devToolsClientState']['staticPathsInfo']
 }
 
 const DEFAULT_CLIENT_STATE =