vercel/next.js · error · Error

Route ${workStore.route} used `unstable_navigation()` inside

Error message

Route ${workStore.route} used `unstable_navigation()` inside `after()` while rendering. The `unstable_navigation()` function is used to indicate the subsequent code must only run during an actual navigation, but `after()` executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/app/api-reference/functions/after

What it means

Error "Route ${workStore.route} used `unstable_navigation()` inside `after()` while rendering. The `unstable_navigation()` function is used to indicate the subsequent code must only run during an actual navigation, but `after()` executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/app/api-reference/functions/after" thrown in vercel/next.js.

Source

Thrown at packages/next/src/server/request/cache-stages.ts:193

 * Unlike `connection()`, it does not mark the subtree as request-dependent —
 * content below `await unstable_navigation()` remains fully cacheable.
 */
export function unstable_navigation(): Promise<void> {
  const workStore = workAsyncStorage.getStore()
  const workUnitStore = workUnitAsyncStorage.getStore()

  if (!workStore || !workUnitStore) {
    const callingExpression = 'unstable_navigation'
    throwForMissingRequestStore(callingExpression)
  }
  if (!process.env.__NEXT_CACHE_COMPONENTS) {
    throw new Error(
      `Route ${workStore.route} used \`unstable_navigation()\`, which requires Cache Components to be enabled. Learn more: https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents`
    )
  }

  if (!isRequestApiAllowedInCurrentPhase(workUnitStore)) {
    throw new Error(
      `Route ${workStore.route} used \`unstable_navigation()\` inside \`after()\` while rendering. The \`unstable_navigation()\` function is used to indicate the subsequent code must only run during an actual navigation, but \`after()\` executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/app/api-reference/functions/after`
    )
  }

  switch (workUnitStore.type) {
    case 'prerender': {
      // Static prerenders are computed once and shared across many
      // clients, so there's no per-request prefetch cost to save by
      // deferring the content — it's deliberately included in the static
      // output (and thus in static prefetches).
      // However, it's excluded from the shell, and has to be separated from
      // unstable_prefetch(), so we have to delay it.
      const { stagedRendering } = workUnitStore
      if (!stagedRendering) {
        // Prospective prerender
        // `unstable_navigation()` will resolve in the final prerender, so resolve it here as well.
        return Promise.resolve(undefined)
      } else {

View on GitHub (pinned to 258b1c1bc0)

Solutions

1. Move the unstable_navigation() call out of the after() callback so it runs during the request
2. Await unstable_navigation() before scheduling the after() work if ordering matters
3. Remove unstable_navigation() if the deferred work does not need navigation-stage semantics

When it happens

Trigger: Thrown at packages/next/src/server/request/cache-stages.ts:181 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of vercel/next.js@258b1c1bc0 (2026-08-21). Data as JSON: /api/errors/83e8fd4fd244c7bc. Report an issue: GitHub.