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

https://github.com/user-attachments/assets/5fd95c4d-3f0d-4bd5-9849-4c35575b3872

[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?