mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
0cf373a585
**What:** `layout-router` currently forces style recalculation on every navigation by manipulating the `scroll-behavior` CSS property on the `<html>` element. This would impact most navigations, even though most don't use smooth scrolling **Why:** To prevent smooth scrolling during router navigation (which can feel janky), Next.js temporarily resets `scroll-behavior` to `auto`, then restores the original value (#40642). While this solves the UX issue, it causes performance overhead for the vast majority of users who don't have smooth scrolling configured. **How:** This PR introduces an optimization that checks for a `data-scroll-behavior="smooth"` attribute before manipulating styles. Only users who explicitly opt into smooth scrolling will experience the style recalculation. - The existing behavior is preserved by default - Opt-in to the new behavior by setting `experimental.optimizeRouterScrolling: true` in Next.js config - When smooth-scroll is detected on the document, a development warning is logged to notify that the default behavior will be changing in an upcoming major.
25 lines
608 B
TypeScript
25 lines
608 B
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
|
|
export default function Page2() {
|
|
return (
|
|
<div>
|
|
<h1>Optimized Page 2</h1>
|
|
<p>This is the second page with smooth scroll optimization.</p>
|
|
<Link
|
|
href="/page1"
|
|
id="to-page1"
|
|
style={{ display: 'block', marginBottom: '20px' }}
|
|
>
|
|
Go to Page 1
|
|
</Link>
|
|
<div style={{ height: '150vh', backgroundColor: '#e0e0e0' }}>
|
|
<p>Scroll content...</p>
|
|
<div style={{ height: '1000px' }} />
|
|
<p>More content...</p>
|
|
</div>
|
|
<p>Bottom of page 2</p>
|
|
</div>
|
|
)
|
|
}
|