Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Next.js 16.2.4 - Bug When Navigating Back from 404 in Development [2 comments, 2 participants]

Official PRs (…)
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.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#93413•Fetched 2026-05-02 05:26:46
View on GitHub
Comments
2
Participants
2
Timeline
6
Reactions
0
Author
Dev-AsfixDev-Asfix
Participants
Dev-AsfixDev-Asfixtuobi2tuobi2
Timeline (top)
commented ×2subscribed ×2issue_type_added ×1labeled ×1

Error Message

Suspicion: This might be related to how Next.js 16 handles hydration or router cache when navigating back from error pages (404) in development mode. The 404 page seems to break React state hydration on the previous page when using the back button.

Code Example

Dependencies:

    "next": "16.2.4",
    "react": "19.2.4",
    "react-dom": "19.2.4"
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/Dev-Asfix/nextjs-404-back-bug.git

To Reproduce

  1. Run npm run dev to start the development server
  2. Navigate to /debug - the counter works, buttons respond correctly
  3. Navigate to a non-existent route, e.g., /debug/ruta-falsa
  4. Observe the Next.js 404 page
  5. Press the browser's "back" button
  6. Return to /debug - the counter NO LONGER works. Buttons don't respond. Only static HTML is visible without JavaScript functionality.

Note: This only happens in development mode (npm run dev). Running npm run build followed by npm start works perfectly in production.

Current vs. Expected behavior

Current behavior: After navigating to a 404 page and pressing the browser's back button, the page loses all interactivity. React state no longer works, the counter doesn't increment, and buttons don't respond to clicks. The page only displays static HTML.

Expected behavior: The counter should continue working normally after navigating back from a 404 page. React state should be preserved and interactions should work as they do before visiting the 404 page or after a manual refresh (F5).

Additional observations:

  • Manual refresh (F5) restores all functionality
  • The problem does NOT occur in production (npm start after npm build)
  • My Next.js 15 projects never had this issue
  • This is a brand new project with minimal code to isolate the problem

Provide environment information

Dependencies:

    "next": "16.2.4",
    "react": "19.2.4",
    "react-dom": "19.2.4"

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

Not Found

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

next dev (local)

Additional context

This issue consistently reproduces in a brand new Next.js 16 project created from scratch. My previous projects using Next.js 15 never had this problem.

What I've already verified:

  • The problem ONLY occurs in development mode (npm run dev)
  • Production (npm run build + npm start) works perfectly
  • Manual page refresh (F5) restores functionality
  • No custom configuration (default Next.js setup)
  • Tested on Chrome and Firefox (same behavior)
  • No errors appear in browser console or terminal

Suspicion: This might be related to how Next.js 16 handles hydration or router cache when navigating back from error pages (404) in development mode. The 404 page seems to break React state hydration on the previous page when using the back button.

extent analysis

TL;DR

The issue can likely be mitigated by adjusting how Next.js handles client-side routing and hydration in development mode.

Guidance

  • Verify if the issue persists when using a different browser or environment to isolate if it's specific to the development setup.
  • Check the Next.js documentation for any changes in routing or hydration behavior between versions 15 and 16 that might be causing this issue.
  • Consider adding a custom getStaticProps or getServerSideProps method to the affected pages to see if server-side rendering affects the behavior.
  • Look into using the useEffect hook with an empty dependency array to rehydrate the React state when the component mounts after navigating back.

Example

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Rehydrate state or perform other necessary actions on mount
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Notes

The issue seems specific to Next.js 16 in development mode, and the exact cause might require deeper investigation into the framework's changes between versions. The provided example is a basic illustration and might need adjustments based on the actual implementation.

Recommendation

Apply a workaround by using useEffect to rehydrate the state or by exploring server-side rendering options, as upgrading to a different version of Next.js might not be feasible or could introduce other compatibility issues.

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?
Loading…
#embedding generation#cache error#pipeline error#runtime error#dependency conflict

Still need to ship something?

×6

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

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Next.js 16.2.4 - Bug When Navigating Back from 404 in Development [2 comments, 2 participants]