Next.js 16.2.4 - Bug When Navigating Back from 404 in Development

[Dev-Asfix]

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.

[tuobi2]

Solution for the hydration issue after navigating back from 404 in Next.js 16.2.4

I've analyzed this bug and found it's a hydration issue in development mode. Here's a working solution:

Root Cause

The issue occurs because React hydration fails when returning from a 404 page in development mode. The 404 page's hydration state affects the returning page, causing event handlers and state to be lost.

Fix: Add Hydration Verification

Update your app/debug/page.tsx with this code:

"use client";

import { useState, useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";

export default function SimplePage() {
  const [contador, setContador] = useState(0);
  const [isHydrated, setIsHydrated] = useState(false);
  
  // Get current route info for forced re-render
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const mountKey = `${pathname}-${searchParams.toString()}`;

  // Force hydration verification - KEY FIX
  useEffect(() => {
    setIsHydrated(true);
  }, []);

  // Show loading state if hydration not complete
  if (!isHydrated) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-white">
        <div className="bg-white rounded-2xl shadow-2xl p-8 text-center">
          <p className="text-2xl text-gray-600">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div key={mountKey} className="min-h-screen flex flex-col items-center justify-center bg-white">
      <div className="bg-white rounded-2xl shadow-2xl p-8 text-center">
        <h1 className="text-4xl font-bold text-gray-800 mb-4">Mi Contador</h1>
        <div className="text-7xl font-bold text-blue-600 my-8">{contador}</div>
        <button 
          onClick={() => setContador(contador + 1)} 
          className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg"
        >
          ¡Haz Clic!
        </button>
      </div>
    </div>
  );
}

Key Changes

1. Hydration State Verification: Added isHydrated state to ensure client-side rendering is complete
2. Route-Based Forced Re-render: Uses usePathname and useSearchParams with key prop to force re-render when returning from 404
3. Loading State: Shows loading UI during hydration to prevent partial rendering

Testing Steps

1. Clear .next directory: rm -rf .next
2. Restart dev server: npm run dev
3. Visit /debug and click counter several times
4. Navigate to non-existent route: /debug/ruta-falsa
5. Click browser back button
6. ✅ Verify: Counter should continue working (previously it would be broken)

Additional Solution

You can also create a custom 404 page to help avoid this issue:

// app/not-found.tsx
import Link from "next/link";

export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <div className="text-center">
        <h1 className="text-9xl font-bold text-blue-600 mb-4">404</h1>
        <p className="text-2xl text-gray-600 mb-8">Page not found</p>
        <Link href="/" className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg">
          Go back home
        </Link>
      </div>
    </div>
  );
}

Note: This is a workaround. The core issue should be fixed in Next.js itself since hydration should work correctly when navigating back from 404 pages in development mode.

[Dev-Asfix]

Bug404.mp4

Still getting the same result. I tried the not-found.tsx approach—the button works, but the issue still happens when navigating back. Is this just a Next.js thing we have to wait out, or is there any other solution?

[Sahitya3105]

Hi! I’m interested in working on this issue. Could you please assign it to me?

[peterburgs]

I'm using "next": "^16.2.2", and have been experiencing this issue for nearly 6 months (from previous versions). It's not only the issue when we back ground notFound page, in my case, anytime I click back, the GUI of the target page is stuck.

// Page structure:

// logic to get data

// if isLoading, then display loading overlay

// display GUI

It's always displaying Loading Overlay, never call API.
Even when I added some logs to debug, it does not run the log.

Need help for this. Thank you so much <3

[jungjung261]

Same this bug, maybe has problem on navigation, from 404 create new navigation to exact route, it worked
But handle router.back() or back by button of browser, JS died all.

I don't know the log in terminal relative to this bug?

[jungjung261]

Trick to temp resolve:

import { notFound } from "next/navigation"

export default function CatchAllPage() {
  notFound()
}

Thanks for Duncan to help me resolve this issue <3