errors/missing-data-scroll-behavior.mdx
Your application has smooth scrolling enabled via CSS (scroll-behavior: smooth), but you haven't added the data-scroll-behavior="smooth" attribute to your <html> element.
Next.js automatically attempts to detect the smooth scrolling configuration to ensure that navigating back/forward through the router doesn't also trigger the smooth scrolling behavior, as this is often not desired.
In a future version of Next.js, this behavior will no longer be automatically detected, and you will need to add the data-scroll-behavior attribute to your <html> element to opt-in to having Next.js disable smooth scrolling during route transitions.
Add data-scroll-behavior="smooth" to your <html> element to prepare for the upcoming optimization:
export default function RootLayout({ children, }: { children: React.ReactNode })
{ return (
<html lang="en" data-scroll-behavior="smooth">
<body>
{children}
</body>
</html>
) }
Or if you're using the Pages Router:
import { Html, Head, Main, NextScript } from 'next/document' export default
function Document() { return (
<html lang="en" data-scroll-behavior="smooth">
<head />
<body>
<main />
<NextScript />
</body>
</html>
) }
Without the data attribute, Next.js must modify the scroll-behavior style on the <html> element on every navigation to ensure smooth scrolling isn't triggered. This can cause unnecessary style recalculation and impact performance.
With the data attribute, Next.js can instantly detect smooth scrolling configuration without triggering style recalculation, resulting in faster navigation and making this behavior opt-in.
You can enable this optimization early by adding the experimental flag to your next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizeRouterScrolling: true,
},
}
module.exports = nextConfig