router.push() issue when navigating from app router to pages

[nicomatsmart]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.19.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 8.6.11
    Relevant Packages:
      next: 13.4.14-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nicomatsmart/next-router-push-issue

To Reproduce

1. Visit https://next-router-push-issue.vercel.app/
2. Click on the button
3. You end up on the CatchAllPage, url says /about
4. Refreshing should show the proper about page

Bug does not reproduce locally.

Describe the Bug

Using router.push() to navigate from app router to a pages page seems to get caught in the [...all] page in app router.

Bug might be related to both the middleware setup and the folder structure. Removing the [...all] page "solves" the issue. Worth repeating that the bug does not reproduce locally, only on Vercel.

Expected Behavior

Using a router.push() from the app router should show the page you wanted to navigate to (in this reproduction, the /about page).

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

_NEXT-1537

[nicomatsmart]

Could be a duplicate of #52264

UPDATE: doesn't seem like it. reproduction has been updated with newest canary

[nicomatsmart]

Update: noticed that the bug affects <Link> as well but only when prefetch is true.
I added two links to https://next-router-push-issue.vercel.app/, with and without prefetch.

If the issue is related to prefetching, it would explain why I haven't been able to reproduce this locally, since

Prefetching is not enabled in development, only in production.

from: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching

[alvarlagerlof]

(same org as @nicomatsmart)

We're currently temporarily solving this with window.location.href = x instead of router.push() to force hard navigations (which work). But it's not a good solution obviously.

[ztanner]

Hey @nicomatsmart & @alvarlagerlof -- thanks for the report, this should be fixed for your deploys once a new Vercel CLI version is published.

I confirmed your code against our unreleased builder and it looks good (preview link) -- hopefully you'll be able to remove that workaround soon

[nicomatsmart]

fantastic! thanks!!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.