vercel / next.js

The React Framework

Home Page:https://nextjs.org

Repository from Github https://github.comvercel/next.jsRepository from Github https://github.comvercel/next.js

Browser Back Navigation Bug with Dynamic Routing

juul-vandevelde opened this issue · comments

Link to the code that reproduces this issue

https://github.com/Yummygum/back-navigation-bug

To Reproduce

  1. Clone the repository and navigate to the project directory.
  2. Install dependencies:
    yarn
  3. Build the project:
    yarn build
  4. Serve the static files:
    npx serve@latest out
    Alternatively, run the project in development mode:
    yarn dev
  5. Manually enter a dog slug URL in the address bar (e.g., /dog/1, /dog/2, or /dog/3).
  6. Let the page cycle through the dogs automatically.
  7. Press the back button and observe that it leads to a blank new tab page instead of returning to the previous page.
  8. Go to the home page and click the button to navigate to Dog 1.
  9. Wait for the page to automatically cycle through the dogs every 3 seconds.
  10. Use the provided button (Link) to navigate to /dog/1.
  11. The browser's back button now sometimes works and sometimes doesn't.

Current vs. Expected behavior

  • Expected: Pressing the back button should return to the previous dog page, whether the navigation is manual or automatic.
  • Actual: When manually navigating to a dog slug (e.g., /dog/1, /dog/2) and allowing the page to automatically cycle through dogs, pressing the back button always leads to a blank new tab page instead of returning to the previous page.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:24 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.3.0-canary.33 // Latest available version is detected (15.3.0-canary.33).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.2
Next.js Config:
  output: export

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

Dynamic Routes

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

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

Additional context

No response

On initial testing, the issue with the back button returning to home page persists on Firefox, while it does not seem to consistently occur on Chrome.

I have the same issue as in the closed ticket (#71953). I'm working with a [...slug] file and my reproduction steps are as follows:
I open the website, then navigate to the product list view. Next, I open a product page, and after clicking the back button, the routing takes me to the home page (the starting view). I checked the browser history and it correctly includes all the steps (including the product list), but the next page (after returning to the home screen) is still the product detail page.

I tested it on all major browsers just to be sure, here are my findings:

  • Chrome: The issue mainly occurs when navigating directly to a slug, and only occasionally when using a Link.
  • Firefox: Same behavior as Chrome — consistent issue on direct navigation, occasional when using a Link.
  • Safari: Matches Chrome and Firefox — issue appears on direct slug access, sometimes when using a Link.

☝️ Bump this issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!