Add Activity name to route layouts and pages

acdlite · acdlite · commit aa9efe2e52fa · 2025-10-17T16:09:55.000-07:00
This is the name that will be displayed in the Suspense DevTools.

A name is given to any boundary that corresponds to a user-defined
layout or page. It omits "virtual" segments that are inserted
automatically by the router.
diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx
@@ -42,6 +42,7 @@ import { hasInterceptionRouteInCurrentTree } from './router-reducer/reducers/has
 import { dispatchAppRouterAction } from './use-action-queue'
 import { useRouterBFCache, type RouterBFCacheEntry } from './bfcache'
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
+import { PAGE_SEGMENT_KEY } from '../../shared/lib/segment'
 
 /**
  * Add refetch marker to router state at the point of the current layout segment.
@@ -476,6 +477,7 @@ function LoadingBoundary({
     const loadingScripts = loadingModuleData[2]
     return (
       <Suspense
+        name="loading.tsx"
         fallback={
           <>
             {loadingStyles}
@@ -688,8 +690,10 @@ export default function OuterLayoutRouter({
     }
 
     if (process.env.__NEXT_ROUTER_BF_CACHE) {
+      const boundaryName = getBoundaryNameForSuspenseDevTools(tree)
       child = (
         <Activity
+          name={boundaryName}
           key={stateKey}
           mode={stateKey === activeStateKey ? 'visible' : 'hidden'}
         >
@@ -705,3 +709,50 @@ export default function OuterLayoutRouter({
 
   return children
 }
+
+function getBoundaryNameForSuspenseDevTools(
+  subtree: FlightRouterState
+): string | undefined {
+  const segment = subtree[0]
+
+  if (typeof segment === 'string') {
+    const children = subtree[1]
+    const isPage = Object.keys(children).length === 0
+    if (isPage) {
+      // Page segment
+      return '/'
+    }
+
+    // Layout segment
+
+    // Skip over "virtual" layouts that don't correspond to app-
+    // defined components.
+    if (
+      segment === '' ||
+      // For some reason, the loader tree sometimes includes extra __PAGE__
+      // "layouts" when part of a parallel route. But it's not a leaf node.
+      // Otherwise, we wouldn't need this special case because pages are
+      // always leaf nodes.
+      // TODO: Investigate why the loader produces these fake page segments.
+      segment.startsWith(PAGE_SEGMENT_KEY) ||
+      // This is inserted by the loader. We should consider encoding these
+      // in a more special way instead of checking the name, to distinguish them
+      // from app-defined groups.
+      segment[0] === '(virtual)'
+    ) {
+      return undefined
+    }
+
+    if (segment === '/_not-found') {
+      // Special case. For some reason, the name itself already has a
+      // leading slash.
+      return '/_not-found/'
+    }
+
+    return `/${segment}/`
+  }
+
+  // Parameterized segments are always layouts
+  const paramCacheKey = segment[1]
+  return `/${paramCacheKey}/`
+}
