Skip to content

Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.

License

Notifications You must be signed in to change notification settings

RevoTale/next-scroll-restorer

Repository files navigation

NextJs Scroll Restorer

NPM Version NPM Downloads NPM License npm bundle size NPM Type Definitions

next-scroll-restorer handles scroll restoration for Next.js apps built with app directory. Fixed bugs that Next.js team ignored.

Important! This component works only for application written with Next.js 'app' directory.

Install

  • npm install next-scroll-restorer for NPM
  • pnpm add next-scroll-restorer for pnpm
  • yarn add next-scroll-restorer for Yarn

Key features

Presequences

Before you start, keep in mind following rules.

/** @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

Usage

Step 1

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

Step 2

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.

About

Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published