Hard Navigation On Client side Navigation (using Link component) in Nextjs 15

[NorouziM]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/musing-lalande-js9nmq?file=%2Fapp%2Fpage.tsx%3A5%2C1

To Reproduce

1.	Create a new page in the starter project.
2.	Add a link to that page on the home page.
3.	Run the app locally.
4.	Click on the link.
5.	A hard navigation occurs, causing the window to reload and the page document to be downloaded.

In Next.js v14, this behavior wouldn’t occur. Navigations were handled as soft navigations, resulting in the document not being downloaded on every navigation and requested only once.

Current vs. Expected behavior

In Next.js v15, clicking on internal links leads to full page reloads (hard navigations), resulting in the entire page document being downloaded each time. This behavior differs from Next.js v14, where navigations were handled as soft navigations (client-side transitions), allowing for faster and more efficient page changes without reloading the entire document.

Provide environment information

Operating System:
  Platform: macos
  Arch: x64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 9.9.0
Relevant Packages:
  next: 15.0.2
  react: 18.3.0,
  react-dom": 18.3.0,
  typescript: 5.1.6

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

Navigation

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

next dev (local), next start (local), Other (Deployed)

Additional context

next15-issue.mp4

[james-han]

@NorouziM
Hi NorouziM,

Thanks for bringing this up. I tested this on my Mac with Next.js v15 and noticed the same issue you mentioned—internal links were causing a full page reload. After checking the file structure, I realized the app/x directory was empty, so navigating to /x triggered a hard reload as expected. Once I added a page.tsx file under app/x, the reload stopped, and the navigation returned to a client-side transition.

page.tsx：

export default function Page() { return <p>X Page</p>; }

In Next.js, a full page reload (hard navigation) can happen in these cases:

1. Missing page.tsx**: If the target route folder lacks a page.tsx file, Next.js won’t recognize it as a fully client-side route.
2. External Links**: Navigating to an external domain URL.
3. Custom Error Boundaries**: Certain errors or boundary components may cause a page refresh to reset the state.
4. Unhandled Server-only Components**: Using server-only components in client-side code or routing logic can trigger a reload.

[NorouziM]

@james-han
Hi James-han
Thank you for your response. I wanted to clarify that I have already added the page.tsx file; I’ve attached a screenshot to confirm this. Additionally, we’re experiencing this issue on a project that was previously functioning correctly on Next.js v14. The problem only arose after upgrading Next.js to the latest version.

I’ve also included a screenshot of the simple link we’re using and a video to demonstrate the issue more clearly on the main post of this issue

[NorouziM]

@timneutkens @leerob Any idea for this problem?

[yarikpetrenko]

@NorouziM You have issues because with Next.js 15 cache behavior was updated and now pages are not longer cached by default see Next.js release notes - https://nextjs.org/blog/next-15#caching-semantics. So because it's not cached it requests the page each time you navigate even on the client. New configuration was added called staleTimes - https://nextjs.org/docs/app/api-reference/config/next-config-js/staleTimes. That allows you to opt into the old behavior.

My question is will it be ever possible to leave dynamic behavior for some pages and have staleTimes on per page basis, because rn I feels a bit radical to have either cache for all pages or no page cache at all.