nextjs - 💡(How to fix) Fix Route groups cause next-router-state-tree header to exceed 40KB limit, resulting in 500 errors [1 comments, 2 participants]

nextjs2026-03-24 18:22:01

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#91872•Fetched 2026-04-08 01:25:55

View on GitHub

Comments

Participants

Timeline

Reactions

Author

stijnbe

Participants

github-actions[bot]

stijnbe

Timeline (top)

labeled ×2closed ×1commented ×1locked ×1

Error Message

15:49:39 GET /deals/ericeira-spring-2026 500 Error: The router state header was too large 15:49:38 GET /login 500 Error: The router state header was too large 15:49:38 GET /cart 500 Error: The router state header was too large

15:43:08 GET /login 500 Error: The router state header was too large 15:43:08 GET /cart 500 Error: The router state header was too large 15:43:08 GET /deals/slow-season-2026 500 Error: The router state header was too large

Root Cause

Over 7 days, ~50 occurrences. Errors always come in bursts at the exact same timestamp — /cart and /login appear together because they are <Link> prefetch targets in the NavBar (present on every page):

Code Example

app/[locale]/
├── (authorized)/        # ~15 nested routes, has layout
├── (checkin)/           # 3 nested routes, has layout
├── (ota)/               # 2 nested routes
├── (referral)/          # 1 nested route
├── (single-type-pages)/ # ~20 nested routes, has layout
├── deals/
├── locations/
├── cities/
├── countries/
└── [...]                # catch-all for CMS pages

---

15:49:39  GET  /deals/ericeira-spring-2026  500  Error: The router state header was too large
15:49:38  GET  /login                       500  Error: The router state header was too large
15:49:38  GET  /cart                        500  Error: The router state header was too large

15:43:08  GET  /login                       500  Error: The router state header was too large
15:43:08  GET  /cart                        500  Error: The router state header was too large
15:43:08  GET  /deals/slow-season-2026      500  Error: The router state header was too large

---

Next.js: 16.2.1
React: 19.2.4
React DOM: 19.2.4
Node: 22.14.0
Platform: Vercel

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

We don't have a minimal reproduction repo yet — this occurs in production after sustained client-side navigation across route groups. Happy to create one if needed.

To Reproduce

Create a Next.js App Router application with multiple route groups at the same level:

app/[locale]/
├── (authorized)/        # ~15 nested routes, has layout
├── (checkin)/           # 3 nested routes, has layout
├── (ota)/               # 2 nested routes
├── (referral)/          # 1 nested route
├── (single-type-pages)/ # ~20 nested routes, has layout
├── deals/
├── locations/
├── cities/
├── countries/
└── [...]                # catch-all for CMS pages

No @-parallel routes are used — only parenthesized route groups.

Navigate between pages in different route groups via client-side navigation (<Link>)
After some period of navigation, the next-router-state-tree header exceeds the 40KB hard limit in parse-and-validate-flight-router-state.js
All subsequent RSC requests (including <Link> prefetches) return 500 errors

Current vs. Expected behavior

Current: After navigating between pages in different route groups, the next-router-state-tree header grows without bound. Once it exceeds 40KB, every RSC request (including <Link> prefetches) returns a 500 error with Error: The router state header was too large (E142). Users see broken pages until they do a hard refresh.

Expected: The router state tree should be pruned during navigation so it doesn't grow unboundedly. Route groups that are no longer active should not contribute to the header size.

Evidence from production logs (Vercel)

15:49:39  GET  /deals/ericeira-spring-2026  500  Error: The router state header was too large
15:49:38  GET  /login                       500  Error: The router state header was too large
15:49:38  GET  /cart                        500  Error: The router state header was too large

15:43:08  GET  /login                       500  Error: The router state header was too large
15:43:08  GET  /cart                        500  Error: The router state header was too large
15:43:08  GET  /deals/slow-season-2026      500  Error: The router state header was too large

The burst pattern indicates a single user session whose router state has grown too large — every subsequent request (including prefetches) fails.

Provide environment information

Next.js: 16.2.1
React: 19.2.4
React DOM: 19.2.4
Node: 22.14.0
Platform: Vercel

Which area(s) are affected? (Select all that apply)

Route Groups

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

Related to #77847 which reports the same symptom for @-parallel routes. Our case demonstrates the issue also affects regular parenthesized route groups without any @-parallel routes.

extent analysis

Fix Plan

To fix the issue of the next-router-state-tree header exceeding the 40KB hard limit, we need to prune the router state tree during navigation. We can achieve this by using the useRouter hook from next/router and manually removing inactive route groups from the router state.

Here are the steps:

Update the next version to the latest to ensure you have the latest fixes.
Create a custom hook to manage the router state:

// useRouterState.js
import { useRouter } from 'next/router';
import { useEffect } from 'react';

const useRouterState = () => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      // Prune the router state tree by removing inactive route groups
      const currentRoute = router.asPath;
      const routeGroups = currentRoute.split('/');
      const activeRouteGroups = routeGroups.filter((group) => group !== '');

      // Remove inactive route groups from the router state
      const newState = {};
      Object.keys(router.routerState).forEach((key) => {
        if (activeRouteGroups.includes(key)) {
          newState[key] = router.routerState[key];
        }
      });
      router.routerState = newState;
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

  return;
};

export default useRouterState;

Use the custom hook in your pages:

// _app.js
import useRouterState from '../hooks/useRouterState';

function MyApp({ Component, pageProps }) {
  useRouterState();

  return <Component {...pageProps} />;
}

export default MyApp;

Verification

To verify that the fix worked, you can monitor your production logs for the Error: The router state header was too large error. If the error is no longer occurring, it indicates that the fix was successful.

You can also test the fix by simulating client-side navigation between pages in different route groups and checking the size of the next-router-state-tree header.

Extra Tips

To prevent similar issues in the future, make sure to regularly review and optimize your router state management. You can also consider implementing additional logging and monitoring to detect potential issues before they affect your users.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#retriever error #indexing error #inference speed #output truncation #response parsing

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - 💡(How to fix) Fix Route groups cause next-router-state-tree header to exceed 40KB limit, resulting in 500 errors [1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Root Cause

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Evidence from production logs (Vercel)

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

Fix Plan

Verification

Extra Tips

Still need to ship something?

TRENDING

nextjs - 💡(How to fix) Fix Route groups cause next-router-state-tree header to exceed 40KB limit, resulting in 500 errors [1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Root Cause

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Evidence from production logs (Vercel)

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

Fix Plan

Verification

Extra Tips

Still need to ship something?

RELATED_DISCOVERY

TRENDING