vercel · andrewimm · Sep 5, 2026
diff --git a/crates/next-api/src/pages.rs b/crates/next-api/src/pages.rs
@@ -944,6 +944,89 @@ impl PageEndpoint {
         )
     }
 
+    /// The `next/dynamic` imports declared in this endpoint's own client module graph, mapped to
+    /// the client chunks that provide them.
+    ///
+    /// This is not the full set a rendered page needs, see
+    /// [`PageEndpoint::client_dynamic_import_chunks_including_app`].
+    #[turbo_tasks::function]
+    async fn client_dynamic_import_chunks(self: Vc<Self>) -> Result<Vc<DynamicImportedChunks>> {
+        let this = self.await?;
+
+        // Only the HTML endpoint renders components, so it is the only one that can render a
+        // `next/dynamic` loadable.
+        if !matches!(this.ty, PageEndpointType::Html) {
+            return Ok(DynamicImportedChunks::default().cell());
+        }
+
+        let project = this.pages_project.project();
+        // The SSR and Client Graphs are not connected in Pages Router.
+        // `get_next_dynamic_imports_for_endpoint` only needs the client graph anyway.
+        let client_module_graph = self.client_module_graph();
+        let next_dynamic_imports =
+            NextDynamicGraphs::new(client_module_graph, *project.per_page_module_graph().await?)
+                .get_next_dynamic_imports_for_endpoint(self.client_module())
+                .await?;
+
+        Ok(*collect_next_dynamic_chunks(
+            client_module_graph,
+            project.client_chunking_context(),
+            next_dynamic_imports,
+            NextDynamicChunkAvailability::AvailabilityInfo(
+                self.client_chunk_group().await?.availability_info,
+            ),
+        )
+        .await?)
+    }
+
+    /// Every `next/dynamic` import that can be rendered while this page is rendered, mapped to the
+    /// client chunks that provide it. This is what the page's react-loadable manifest has to
+    /// describe.
+    ///
+    /// Unlike webpack, which emits a single manifest for the whole build, Turbopack emits one
+    /// manifest per page, and `pages/_app` is a separate endpoint with its own client chunk group.
+    /// That chunk group is loaded for every page, and `_app` is rendered around every page, so the
+    /// `next/dynamic` imports it declares have to be listed in each page's manifest as well.
+    /// Otherwise their module ids are missing from `__NEXT_DATA__.dynamicIds`, the client doesn't
+    /// wait for the chunks before hydrating, renders the loadable's fallback instead and React
+    /// discards the server rendered markup.
+    #[turbo_tasks::function]
+    async fn client_dynamic_import_chunks_including_app(
+        self: Vc<Self>,
+    ) -> Result<Vc<DynamicImportedChunks>> {
+        let this = self.await?;
+        let own_chunks = self.client_dynamic_import_chunks();
+
+        // Only the HTML endpoint renders `_app` around the page. `/_app` itself is rendered as
+        // part of every other page, so it must not (and, to avoid recursing into this very task,
+        // cannot) ask for its own entries. `/_document` is never hydrated, so webpack doesn't
+        // report ids for it either.
+        if !matches!(this.ty, PageEndpointType::Html)
+            || this.pathname == "/_app"
+            || this.pathname == "/_document"
+        {
+            return Ok(own_chunks);
+        }
+
+        let app_chunks = this
+            .pages_project
+            .app_page_endpoint()
+            .client_dynamic_import_chunks()
+            .await?;
+        if app_chunks.is_empty() {
+            return Ok(own_chunks);
+        }
+
+        let own_chunks = own_chunks.await?;
+        let mut merged = FxIndexMap::default();
+        merged.reserve(app_chunks.len() + own_chunks.len());
+        merged.extend(app_chunks.iter().map(|(k, v)| (*k, *v)));
+        // The page's own entries win, they were resolved against the page's own chunk group.
+        merged.extend(own_chunks.iter().map(|(k, v)| (*k, *v)));
+
+        Ok(Vc::cell(merged))
+    }
+
     #[turbo_tasks::function]
     async fn internal_ssr_chunk(
         self: Vc<Self>,
@@ -965,17 +1048,11 @@ impl PageEndpoint {
             } = *self.internal_ssr_chunk_module().await?;
 
             let project = this.pages_project.project();
-            // The SSR and Client Graphs are not connected in Pages Router.
-            // We are only interested in get_next_dynamic_imports_for_endpoint at the
-            // moment, which only needs the client graph anyway.
+            // The SSR and Client Graphs are not connected in Pages Router, this one is only used
+            // for chunking the server side rendering entry below.
             let ssr_module_graph = self.ssr_module_graph();
 
-            let next_dynamic_imports = if let PageEndpointType::Html = this.ty {
-                let client_availability_info = self.client_chunk_group().await?.availability_info;
-
-                let client_module_graph = self.client_module_graph();
-                let per_page_module_graph = *project.per_page_module_graph().await?;
-
+            if let PageEndpointType::Html = this.ty {
                 // We only validate the global css imports when there is not a `app` folder at the
                 // root of the project.
                 if project.app_project().await?.is_none() {
@@ -998,38 +1075,19 @@ impl PageEndpoint {
                         .module();
 
                     validate_pages_css_imports(
-                        client_module_graph,
-                        per_page_module_graph,
+                        self.client_module_graph(),
+                        *project.per_page_module_graph().await?,
                         self.client_module(),
                         app_module,
                     )
                     .await?;
                 }
+            }
 
-                let next_dynamic_imports =
-                    NextDynamicGraphs::new(client_module_graph, per_page_module_graph)
-                        .get_next_dynamic_imports_for_endpoint(self.client_module())
-                        .await?;
-                Some((next_dynamic_imports, client_availability_info))
-            } else {
-                None
-            };
-
-            let dynamic_import_entries = if let Some((
-                next_dynamic_imports,
-                client_availability_info,
-            )) = next_dynamic_imports
-            {
-                collect_next_dynamic_chunks(
-                    self.client_module_graph(),
-                    project.client_chunking_context(),
-                    next_dynamic_imports,
-                    NextDynamicChunkAvailability::AvailabilityInfo(client_availability_info),
-                )
-                .await?
-            } else {
-                DynamicImportedChunks::default().resolved_cell()
-            };
+            let dynamic_import_entries = self
+                .client_dynamic_import_chunks_including_app()
+                .to_resolved()
+                .await?;
 
             let chunking_context: Vc<Box<dyn ChunkingContext>> = match runtime {
                 NextRuntime::NodeJs => Vc::upcast(node_chunking_context),

diff --git a/test/e2e/next-dynamic-in-custom-app/components/app-header.tsx b/test/e2e/next-dynamic-in-custom-app/components/app-header.tsx
@@ -0,0 +1,3 @@
+export default function AppHeader() {
+  return <header id="app-header">app-level dynamic header</header>
+}
diff --git a/test/e2e/next-dynamic-in-custom-app/components/page-widget.tsx b/test/e2e/next-dynamic-in-custom-app/components/page-widget.tsx
@@ -0,0 +1,3 @@
+export default function PageWidget() {
+  return <div id="page-widget">page-level dynamic widget</div>
+}
diff --git a/test/e2e/next-dynamic-in-custom-app/next-dynamic-in-custom-app.test.ts b/test/e2e/next-dynamic-in-custom-app/next-dynamic-in-custom-app.test.ts
@@ -0,0 +1,72 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+// Regression test for https://github.com/vercel/next.js/issues/98287
+//
+// `next/dynamic({ ssr: true })` declared in `pages/_app` is server rendered,
+// but under Turbopack its module id was missing from
+// `__NEXT_DATA__.dynamicIds`, because Turbopack emits a per-page
+// react-loadable manifest and `pages/_app` is a separate entrypoint. Without
+// the id the client renders the loadable's fallback while hydrating, React
+// reports a mismatch and throws the server rendered subtree away.
+describe('next-dynamic-in-custom-app', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  async function getDynamicIds(path: string) {
+    const $ = await next.render$(path)
+    const nextData = JSON.parse($('#__NEXT_DATA__').html())
+    return { $, dynamicIds: nextData.dynamicIds ?? [] }
+  }
+
+  describe.each(['/', '/ssr'])('%s', (path) => {
+    it('reports both the _app and the page dynamic in __NEXT_DATA__.dynamicIds', async () => {
+      const { dynamicIds } = await getDynamicIds(path)
+
+      // One id for the `_app` declared loadable, one for the page declared one.
+      expect(dynamicIds).toHaveLength(2)
+
+      // Bundlers that use readable module ids (all but a Turbopack production
+      // build) let us pin down which loadable each id belongs to.
+      const readableIds = dynamicIds.filter(
+        (id: string | number) => typeof id === 'string'
+      )
+      if (readableIds.length > 0) {
+        expect(readableIds).toEqual(
+          expect.arrayContaining([expect.stringMatching(/app-header/)])
+        )
+        expect(readableIds).toEqual(
+          expect.arrayContaining([expect.stringMatching(/page-widget/)])
+        )
+      }
+    })
+
+    it('server renders both dynamic components instead of their fallbacks', async () => {
+      const { $ } = await getDynamicIds(path)
+
+      expect($('#app-header').text()).toBe('app-level dynamic header')
+      expect($('#page-widget').text()).toBe('page-level dynamic widget')
+      expect($('#app-header-loading')).toHaveLength(0)
+      expect($('#page-widget-loading')).toHaveLength(0)
+    })
+
+    it('keeps the server rendered _app chrome after hydration', async () => {
+      const browser = await next.browser(path)
+
+      await retry(async () => {
+        expect(await browser.elementByCss('#app-header').text()).toBe(
+          'app-level dynamic header'
+        )
+        expect(await browser.eval('window.next.router.isReady')).toBe(true)
+      })
+
+      const hydrationErrors = (await browser.log()).filter(
+        ({ source, message }) =>
+          source === 'error' &&
+          /hydrat|Minified React error #(418|423|425)/i.test(message)
+      )
+      expect(hydrationErrors).toEqual([])
+    })
+  })
+})
diff --git a/test/e2e/next-dynamic-in-custom-app/pages/_app.tsx b/test/e2e/next-dynamic-in-custom-app/pages/_app.tsx
@@ -0,0 +1,20 @@
+import type { AppProps } from 'next/app'
+import dynamic from 'next/dynamic'
+
+// Declaring a `ssr: true` dynamic import in `_app` is the common pattern for
+// persistent site chrome. Its module id has to end up in
+// `__NEXT_DATA__.dynamicIds` so the client waits for the chunk before
+// hydrating, otherwise React throws the server rendered markup away.
+const AppHeader = dynamic(() => import('../components/app-header'), {
+  ssr: true,
+  loading: () => <p id="app-header-loading">loading header</p>,
+})
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <AppHeader />
+      <Component {...pageProps} />
+    </>
+  )
+}
diff --git a/test/e2e/next-dynamic-in-custom-app/pages/index.tsx b/test/e2e/next-dynamic-in-custom-app/pages/index.tsx
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+
+const PageWidget = dynamic(() => import('../components/page-widget'), {
+  ssr: true,
+  loading: () => <p id="page-widget-loading">loading widget</p>,
+})
+
+export default function Page() {
+  return (
+    <main>
+      <p>hello world</p>
+      <PageWidget />
+    </main>
+  )
+}
diff --git a/test/e2e/next-dynamic-in-custom-app/pages/ssr.tsx b/test/e2e/next-dynamic-in-custom-app/pages/ssr.tsx
@@ -0,0 +1,21 @@
+import dynamic from 'next/dynamic'
+
+const PageWidget = dynamic(() => import('../components/page-widget'), {
+  ssr: true,
+  loading: () => <p id="page-widget-loading">loading widget</p>,
+})
+
+export default function SsrPage() {
+  return (
+    <main>
+      <p>hello world</p>
+      <PageWidget />
+    </main>
+  )
+}
+
+// Rendered on demand, so `__NEXT_DATA__` is produced by the server at request
+// time instead of at build time.
+export function getServerSideProps() {
+  return { props: {} }
+}