Layout shift while rendering on hard navigation from 14.2.2
navin-moorthy opened this issue · 1 comments
navin-moorthy commented
Link to the code that reproduces this issue
https://github.com/navin-moorthy/next.js-layout-shift-from-14.2.2
To Reproduce
- Check the next version -
next": "14.2.2
- Run
npm run dev
- Go to HomePage
/
- Go to AboutPage
/about
- Hard refresh
- Go to Homepage '`'
- To reproduce again, Hard refresh
- Go to AboutPage
/about
You will be able to see the footer and then render the page.tsx
contents both on HomePage and AboutPage
Repeat above steps if it's not visible.
Current vs. Expected behavior
Current next": "14.2.2
& above
Footer will be rendered below Header and then the contents from page.tsx
pushed down the Footer.
NOTE: Also checked future versions including canary versions)
I tried best but I couldn't capture that frame in a video recording.
But here's the same version to reproduce,
2024-05-15.at.19.42.07.-.Magenta.Jaguar.mp4
Expected next": "14.2.1
NOTE: Make sure to clear next
folder, after changing the versions
In this version, you don't see any layout shifts.
Footer will be rendered properly and then the contents from page.tsx
replaced the Footer.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.12.0
npm: 10.5.0
Yarn: 1.22.19
pnpm: 8.15.6
Relevant Packages:
next: 14.2.2 // There is a newer version (14.2.3) available, upgrade recommended!
eslint-config-next: 14.2.3
react: 18.3.1
react-dom: 18.3.1
typescript: 5.4.5
Next.js Config:
output: N/A
NOTE: Happens everywhere
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), Vercel (Deployed), Other (Deployed)
Additional context
No response