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.
22 lines
570 B
TypeScript
22 lines
570 B
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div>
|
|
<h1>Smooth Scroll Optimization Tests</h1>
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<Link
|
|
href="/optimized/page1"
|
|
style={{ display: 'block', marginBottom: '10px' }}
|
|
>
|
|
Test Optimized Smooth Scroll (with data attribute)
|
|
</Link>
|
|
<Link href="/legacy/page1" style={{ display: 'block' }}>
|
|
Test Legacy Smooth Scroll (no data attribute)
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|