Bug: App Router renders incorrect page and refreshes when navigating with basePath (Next.js 16)

Why this is a good first issue

Issue involves complex router behavior with basePath.

AI Summary

The issue describes incorrect rendering and refreshing behavior in Next.js App Router when using basePath, causing brief flashes of unrelated content and metadata changes. The problem requires understanding of router cache and basePath handling, but the exact cause and solution are not immediately clear.

Issue Description

Link to the code that reproduces this issue

https://github.com/alexismendez11/ecommerce-demo

To Reproduce

Open the demo site.
Navigate to a category page (example: Pizza).
While already on the Pizza category page, click the Pizza link again.
Observe the behavior.

Current vs. Expected behavior

Current behavior

The page performs a refresh/navigation even though the route is the same.
For a brief moment, content from a different category/page is rendered.
Then the correct Pizza page renders again.
The flashed page is not the previous page nor the destination — it appears to come from router cache.
Metadata also briefly changes during this flash.

Expected behavior

When clicking a pointing to the current route:
No navigation should occur.
No refresh should happen.
No other page content should render.
Metadata should remain stable.

Provide environment information

Next.js: 16.x
React: 19
App Router
Browser: Chrome (latest)


Occurs in both dev and production builds

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

cacheComponents

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

next start (local)

Additional context

Demo site

Summary

When using App Router with basePath enabled in Next.js 16, client navigation sometimes:

briefly renders content from an unrelated page
updates metadata incorrectly
refreshes even when navigating to the same route

This behavior does not occur when basePath is removed.