next-scroll-restorer
Advanced tools
   
next-scroll-restorer handles scroll restoration for Next.js apps built with app directory. Fixed bugs related to forward/backward browser navigation that Next.js team ignored.
Important! This component works only for application written with Next.js 'app' directory.
npm install next-scroll-restorer for NPMpnpm add next-scroll-restorer for pnpmyarn add next-scroll-restorer for Yarnlayout.tsx file. Root layout isn't required.Before you start, keep in mind following rules.
scrollRestoration option in Next.js config to avoid conflicts.windowHistorySupport in your Next.js config under expermimental property.
Since Next.js 14.1.0 browser history support is enabled by default./** @type {import('next').NextConfig} */
const nextConfig = {
experimental:{
//Only For Next.js versions prior to 14.1.0 because it is enabled by default since version 14.1.0
windowHistorySupport:true
},
}
module.exports = nextConfig
Create component named ClientSideScrollRestorer in your src directory with useScrollRestorer hook and "use client" directive to prevent server errors.
src/ClientSideScrollRestorer.tsx
"use client"
import {useScrollRestorer} from 'next-scroll-restorer';
const ClientSideScrollRestorer = () => {
useScrollRestorer()
return <></>
}
export default ClientSideScrollRestorer
Import component created in a previous step to your root layout file (layout.tsx).
Wrap it wih React <Suspense/> to avoid possible client-side deopting for entire page.
app/layout.tsx
import ClientSideScrollRestorer from '../src/ClientSideScrollRestorer'
import {ReactNode, Suspense} from "react";
type Props = {
children: ReactNode
}
const RootLayout = ({children}) => {
return (
<html lang="uk">
<body>{children}</body>
<Suspense>
<ClientSideScrollRestorer/>
</Suspense>
</html>
)
}
export default RootLayout
It can be any nesting layout shared by group of routes in case you do not want to enable scroll restoration for the whole application.
0.10.2
FAQs
   
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.