Also getting this with PPR enabled when reaching a 404 page.
This is Sentry's AI explaining what happened.
Any thoughts? @timneutkens

Root Cause of the Issue

Router component's conditional logic, triggered by an unknown page, alters hook execution, violating React's Rules of Hooks during re-render.

User navigates to unknown page, initiating a page load and triggering the Next.js routing system, which is the entry point for rendering the requested documentation page.

The user's navigation action triggers Next.js's page rendering process, starting with the Router component.

The Router component in src/client/components/app-router.tsx begins its rendering process, initializing its state and preparing to render the appropriate content based on the current route.

// src/client/components/app-router.tsx
function Router(props) {
  // ...
}

The Router component is responsible for handling navigation and rendering the correct content. Its internal logic determines which components to render and how to manage the application's state.
(See src/client/components/app-router.tsx)

Conditional logic within the Router component is triggered specifically by the unknown route, leading to a unique execution path during the rendering process.

// src/client/components/app-router.tsx
function Router(props) {
  // ...
  if (/* some condition based on props.canonicalUrl */) {
    // Execute hooks A, B, C
  } else {
    // Execute hooks A, B, D, E
  }
  // ...
}

This conditional logic, based on the route or other factors, determines which hooks are executed. The /docs/migrate-new-tenandt route triggers a specific branch of this logic.
(See src/client/components/app-router.tsx)

The useMemo hook on line 211 in src/client/components/app-router.tsx is reached after a different number of hooks have been executed compared to the previous render, violating React's Rules of Hooks.

// src/client/components/app-router.tsx
const { searchParams, pathname } = useMemo(() => { ... }, [canonicalUrl]);

Because the conditional logic altered the hook execution path, the useMemo hook is now being called in a different order or after a different number of hooks than before.
(See src/client/components/app-router.tsx)

React detects the hook mismatch and throws an error: "Rendered more hooks than during the previous render.", halting the rendering process.

The error message indicates that React's internal hook tracking mechanism has detected an inconsistency in the number and order of hooks being called during the rendering process.

Also encounter this issue in next 15.1.3

I can see this error on next.js 15.3.1

@wlcharlie @himself65 @moroshko
For me, it was caused by a Clientside component mounted in my layout.tsx trying to run a server action.
Since my app is in a 404 page, the server action will always fail, combine that with the 404 trying to render, I almost always got this error

Running into this issue as well on 15.1.2, similar cause to what @glekner discovered. One of our client context providers in our root layout file fetches some data and then updates its internal value with whatever it got from the server. This fetch is done via a server action which does no mutations, just fetches some data.

Though, while the layout client component is fetching its data a redirect happens, and causes this error.

  GET /one 200 in 78ms
~Root layout client component calls action to fetch data
~Page level (page one) server component performs redirect based on some condition
  GET /two 200 in 61ms
~Server action starting on server (sent from root layout)
~Resolving data from server action
  POST /one 200 in 92ms
  GET /two 200 in 37ms
~Server action starting on server
~Resolving from server action
  POST /two 200 in 72ms

Next Info:

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:40 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 9.15.5
Relevant Packages:
  next: 15.2.1 // There is a newer version (15.3.1) available, upgrade recommended! 
  eslint-config-next: 15.2.1
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.4.5
Next.js Config:
  output: N/A