vercel / next.js

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

Redirect in page.tsx shows a white page on client-side navigation #67427

Open Jens-n11 opened 2 days ago

Jens-n11 commented 2 days ago

Link to the code that reproduces this issue

https://github.com/Jens-n11/nextjs-redirect-example

To Reproduce

If you use a next/navigation redirect() in a page.tsx which is called via a next/Link <Link> (client side navigation) the browser will show a white page for a part of a second until the redirect happens.

  1. Start the app
  2. Open the start page (http://localhost:3000)
  3. Click on the "Next-Link with redirect"
  4. You will see for a short time a white page before the green landing page loads. Its easier to see if you throttle the connection speed.

Current vs. Expected behavior

I would expect, that next does not start rendering the new page if the page throws a redirect. I would expect the same look-and-feel with next/Link like it would be with an <a> Tag. See this example video with first the <a> Tag and then the next/link (with client side navigation):

https://github.com/vercel/next.js/assets/110047537/3fa39af3-d2b5-45b4-80cf-4f0cf3330547

Provide environment information

Doesn't really matter, but here they are:

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:13:18 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

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

Navigation

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

next dev (local), next build (local), next start (local)

Additional context

No response