vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.61k stars 26.82k forks source link

Combining `basePath`, `rewrites`, and middleware breaks page transitions #50173

Open mizdra opened 1 year ago

mizdra commented 1 year ago

Verify canary release

Provide environment information

$ npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.8.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.1.7
    Relevant packages:
      next: 13.4.4-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

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

Data fetching (gS(S)P, getInitialProps), Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

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

https://codesandbox.io/s/github/mizdra/reproduction-nextjs-middleware-basepath-rewrites

https://github.com/mizdra/reproduction-nextjs-middleware-basepath-rewrites

To Reproduce

  1. Start the development server with npm i && npm run dev.
  2. Access http://localhost:3000/base in your browser
  3. Click on the link /1234 (Runtime error occurs)

https://github.com/vercel/next.js/assets/9639995/e0b934b5-fdbc-490d-b7a5-79fd09cb7522

Describe the Bug

When transitioning from page A to page B with the Link component, there is a bug that causes the page component of page A to be rendered using pageProps derived from getServerSideProps of page B. This can result in runtime errors.

image

This only seems to happen when cleverly combining basePath, rewrites and Middleware (see the reproduction repository for details). The following changes to the Reproduction Repository will prevent the problem.

In addition, the problem is reproduced when the length of the path to be transitioned to is less than 4, but not when it is greater than 5. For example, the problem reproduces for transitions to /1234, but not for /12345.

image

Expected Behavior

When transitioning from page A to page B with a Link component, the page component of page B should be rendered using pageProps derived from getServerSideProps of page B.

Which browser are you using? (if relevant)

Chrome 112.0.5615.137(Official Build) (arm64)

How are you deploying your application? (if relevant)

next dev

mizdra commented 5 months ago

This problem also occurs in 14.3.0-canary.18.