nextjs - 💡(How to fix) Fix bug: Client-side navigation freezes (JS thread deadlocks) on browser Back/Forward (BFCache) restore in Next 16 Dev Mode [1 pull requests]

Link to the code that reproduces this issue

https://github.com/AsrafulAsif/next-bfcache-bug

To Reproduce

Steps to Reproduce 1.Initialize a fresh Next.js 16 project using npx create-next-app@canary or [email protected].

2.Add a simple interactive client component to app/page.tsx:

TypeScript :

"use client"; export default function Home() { return ( <button onClick={() => console.log("Clicked")} className="bg-black text-white p-4"> Click me </button> ); }

3.Run the development server: npm run dev.

4.Open the page in the browser (Chrome/Edge/Safari).

5.Hard-navigate away from the application by typing another URL in the address bar (e.g., google.com) and hitting enter.

6.Click the browser's Back button to return to localhost. (The page is pulled from BFCache).

7.Attempt to click the "Click me" button. Result: The button does nothing; console logs do not fire.

Current vs. Expected behavior

When running a Next.js 16 application in development mode (next dev), using the browser's Back button to exit the site, and then clicking the Forward button to return causes the entire JavaScript runtime to freeze. The UI and layout render visually, but all React event listeners (such as onClick) fail to fire. Clicking standard browser reload restores functionality instantly. This issue does not occur in production builds (next build && next start).

Expected Behavior When navigating back and forth using the browser history, the page should restore from the Back/Forward Cache (BFCache) and successfully re-hydrate or re-establish Fast Refresh connections without deadlocking the main JavaScript thread.

Actual Behavior Upon hitting the Forward button to re-enter the app, the HTML/CSS is restored but the React event system is completely unresponsive. No errors are logged to the browser console; the JS execution loop simply hangs.

Provide environment information

Environment Information

Next.js Version: 16.2.6

React Version: 19.2.4

Node Version: 24.13.1

Environment: Development (next dev)

Browsers tested: Chrome, Edge, Safari

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

Pages Router

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

next dev (local)

Additional context

Additional Context

• The issue completely disappears when executing a production build (next build).
• Turning on "Disable Cache" in the DevTools Network tab bypasses the issue by preventing the browser from utilizing BFCache, suggesting a deadlock between Next.js 16's internal Dev Router synchronization and the browser's BFCache re-activation routine.