refactor and show note for pages router

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -337,12 +337,13 @@ function DevToolsPopover({
       />
 
       {/* Page Route Info */}
-      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER && routerType === 'app' ? (
+      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
         <SegmentsExplorer
           isOpen={isSegmentExplorerOpen}
           close={closeToRootMenu}
           triggerRef={triggerRef}
           style={popover}
+          routerType={routerType}
         />
       ) : null}
 
@@ -411,16 +412,15 @@ function DevToolsPopover({
                 onClick={() => setOpen(OVERLAYS.Preferences)}
                 index={isTurbopack ? 2 : 3}
               />
-              {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER &&
-              routerType === 'app' ? (
+              {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>
           </Context.Provider>
         </div>

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -9,13 +9,23 @@ const isFileNode = (node: SegmentTrieNode) => {
   return !!node.value?.type && !!node.value?.pagePath
 }
 
-function PageSegmentTree({ tree }: { tree: SegmentTrieNode }) {
+function PageSegmentTree({
+  tree,
+  isAppRouter,
+}: {
+  tree: SegmentTrieNode
+  isAppRouter: boolean
+}) {
   return (
     <div
       className="segment-explorer-content"
       data-nextjs-devtool-segment-explorer
     >
-      <PageSegmentTreeLayerPresentation node={tree} level={0} segment="" />
+      {isAppRouter ? (
+        <PageSegmentTreeLayerPresentation node={tree} level={0} segment="" />
+      ) : (
+        <p>Route Info currently is only available for the App Router.</p>
+      )}
     </div>
   )
 }
@@ -163,13 +173,16 @@ function PageSegmentTreeLayerPresentation({
 }
 
 export function SegmentsExplorer(
-  props: DevToolsInfoPropsCore & HTMLProps<HTMLDivElement>
+  props: DevToolsInfoPropsCore &
+    HTMLProps<HTMLDivElement> & {
+      routerType: 'app' | 'pages'
+    }
 ) {
   const tree = useSegmentTree()
-
+  const isAppRouter = props.routerType === 'app'
   return (
     <DevToolsInfo title="Route Info" {...props}>
-      <PageSegmentTree tree={tree} />
+      <PageSegmentTree tree={tree} isAppRouter={isAppRouter} />
     </DevToolsInfo>
   )
 }

packages/next/src/server/app-render/create-component-tree.tsx

@@ -654,17 +654,7 @@ async function createComponentTreeInternal({
   }
 
   if (isPage) {
-    const pageFilePath = getConventionPathByType(tree, dir, 'page')
-    const PageComponent =
-      isSegmentViewEnabled && pageFilePath
-        ? (pageProps: any) => {
-            return (
-              <SegmentViewNode type={nodeName} pagePath={pageFilePath}>
-                <Component {...pageProps} />
-              </SegmentViewNode>
-            )
-          }
-        : Component
+    const PageComponent = Component
 
     // Assign searchParams to props if this is a page
     let pageElement: React.ReactNode
@@ -730,10 +720,21 @@ async function createComponentTreeInternal({
         )
       }
     }
+
+    const pageFilePath = getConventionPathByType(tree, dir, 'page')
+    const wrappedPageElement =
+      isSegmentViewEnabled && pageFilePath ? (
+        <SegmentViewNode type={nodeName} pagePath={pageFilePath}>
+          {pageElement}
+        </SegmentViewNode>
+      ) : (
+        pageElement
+      )
+
     return [
       actualSegment,
       <React.Fragment key={cacheNodeKey}>
-        {pageElement}
+        {wrappedPageElement}
         {layerAssets}
         <OutletBoundary>
           <MetadataOutlet ready={getViewportReady} />
@@ -745,18 +746,7 @@ async function createComponentTreeInternal({
       isPossiblyPartialResponse,
     ]
   } else {
-    const layoutFilePath = getConventionPathByType(tree, dir, 'layout')
-    const SegmentComponent =
-      isSegmentViewEnabled && layoutFilePath
-        ? (segmentProps: any) => {
-            return (
-              <SegmentViewNode type={nodeName} pagePath={layoutFilePath}>
-                <Component {...segmentProps} />
-              </SegmentViewNode>
-            )
-          }
-        : Component
-
+    const SegmentComponent = Component
     const isRootLayoutWithChildrenSlotAndAtLeastOneMoreSlot =
       rootLayoutAtThisLevel &&
       'children' in parallelRoutes &&
@@ -915,10 +905,21 @@ async function createComponentTreeInternal({
         )
       }
     }
+
+    const layoutFilePath = getConventionPathByType(tree, dir, 'layout')
+    const wrappedSegmentNode =
+      isSegmentViewEnabled && layoutFilePath ? (
+        <SegmentViewNode type={nodeName} pagePath={layoutFilePath}>
+          {segmentNode}
+        </SegmentViewNode>
+      ) : (
+        segmentNode
+      )
+
     // For layouts we just render the component
     return [
       actualSegment,
-      segmentNode,
+      wrappedSegmentNode,
       parallelRouteCacheNodeSeedData,
       loadingData,
       isPossiblyPartialResponse,

test/development/app-dir/segment-explorer/segment-explorer.test.ts

@@ -108,15 +108,10 @@ describe('segment-explorer', () => {
     `)
   })
 
-  it('should not show segment explorer for pages router', async () => {
+  it('should indicate segment explorer is not available pages router', async () => {
     const browser = await next.browser('/pages-router')
-
-    // open the devtool button
-    await openDevToolsIndicatorPopover(browser)
-
-    // open the segment explorer
-    expect(
-      await browser.hasElementsByCss('[data-segment-explorer]')
-    ).toBeFalse()
+    expect(await getSegmentExplorerContent(browser)).toMatchInlineSnapshot(
+      `"Route Info currently is only available for the App Router."`
+    )
   })
 })