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

Author: devjiwonchoi

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -613,6 +613,12 @@ export default function HotReload({
     appIsrManifestRef,
   ])
 
+  // Using __NEXT_DEVTOOLS_CLIENT_STATE as we already have it.
+  window.__NEXT_DEVTOOLS_CLIENT_STATE = {
+    ...window.__NEXT_DEVTOOLS_CLIENT_STATE,
+    staticPathsInfo: state.devToolsClientState.staticPathsInfo,
+  }
+
   return (
     <AppDevOverlay state={state} globalError={globalError}>
       {children}

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

@@ -23,6 +23,7 @@ export type DevToolsClientState = {
     showIndicator: boolean
     disableDevIndicator: boolean
   }
+  staticPathsInfo: DevToolsServerState['staticPathsInfo']
 }
 
 export interface OverlayState {
@@ -137,14 +138,20 @@ 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,
       disableDevIndicator: false,
       /* 
-    This is set to `true` when we can reliably know
-    whether the indicator is in disabled state or not.  
-    Otherwise the surface would flicker because the disabled flag loads from the config.
-  */
+        This is set to `true` when we can reliably know
+        whether the indicator is in disabled state or not.  
+        Otherwise the surface would flicker because the disabled flag loads from the config.
+      */
       showIndicator: false,
     },
   },

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

@@ -59,6 +59,12 @@ const state: OverlayState = {
       showIndicator: true,
       disableDevIndicator: false,
     },
+    staticPathsInfo: {
+      page: '',
+      pathname: '',
+      staticPaths: [],
+      isPageIncludedInStaticPaths: false,
+    },
   },
 }
 

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

@@ -79,6 +79,12 @@ 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 && staticPathsInfo.pathname === `/${pagePathPrefix}`
+      ? staticPathsInfo.staticPaths
+      : []
+
   return (
     <div className="segment-explorer-item">
       {!fileName || level === 0 ? null : (
@@ -95,6 +101,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>

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

@@ -33,6 +33,12 @@ const state: OverlayState = {
       showIndicator: true,
       disableDevIndicator: false,
     },
+    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

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

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

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

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

@@ -857,6 +857,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 =