{"id":30182653,"url":"https://github.com/RevoTale/next-scroll-restorer","last_synced_at":"2025-08-12T10:04:22.568Z","repository":{"id":194540947,"uuid":"689455630","full_name":"RevoTale/next-scroll-restorer","owner":"RevoTale","description":"Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.","archived":false,"fork":false,"pushed_at":"2025-07-18T23:30:32.000Z","size":816,"stargazers_count":81,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T03:58:50.591Z","etag":null,"topics":["nextjs","nextjs-scroll-restoration","scrollrestoration"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RevoTale.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-09T21:31:56.000Z","updated_at":"2025-07-18T23:29:17.000Z","dependencies_parsed_at":"2023-10-03T00:52:01.291Z","dependency_job_id":"936eb3c7-7429-4628-889a-85292568c7fb","html_url":"https://github.com/RevoTale/next-scroll-restorer","commit_stats":{"total_commits":81,"total_committers":5,"mean_commits":16.2,"dds":0.7407407407407407,"last_synced_commit":"d2420445df93f19ca6e07e389c9dcf57e6ab59b6"},"previous_names":["rustedlabs/next-scroll-restorer","revotale/next-scroll-restorer"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/RevoTale/next-scroll-restorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevoTale%2Fnext-scroll-restorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevoTale%2Fnext-scroll-restorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevoTale%2Fnext-scroll-restorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevoTale%2Fnext-scroll-restorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RevoTale","download_url":"https://codeload.github.com/RevoTale/next-scroll-restorer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RevoTale%2Fnext-scroll-restorer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270040726,"owners_count":24516684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","nextjs-scroll-restoration","scrollrestoration"],"created_at":"2025-08-12T10:02:15.083Z","updated_at":"2025-08-12T10:04:22.559Z","avatar_url":"https://github.com/RevoTale.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# NextJs Scroll Restorer\n![NPM Version](https://img.shields.io/npm/v/next-scroll-restorer)\n![NPM Downloads](https://img.shields.io/npm/dm/next-scroll-restorer)\n![NPM License](https://img.shields.io/npm/l/next-scroll-restorer)\n![npm bundle size](https://img.shields.io/bundlephobia/min/next-scroll-restorer)\n![NPM Type Definitions](https://img.shields.io/npm/types/next-scroll-restorer)\n\n[next-scroll-restorer](https://www.npmjs.com/package/next-scroll-restorer) handles scroll restoration for Next.js apps built with **app** directory. \nFixed bugs related to forward/backward browser navigation that Next.js team ignored.\n\n**Important!** This component works only for application written with [**Next.js 'app' directory**](https://nextjs.org/docs/app).\n## Install\n- `npm install next-scroll-restorer`  for [NPM](https://www.npmjs.com/package/next-scroll-restorer)\n- `pnpm add next-scroll-restorer`  for [pnpm](https://pnpm.io)\n- `yarn add next-scroll-restorer` for [Yarn](https://yarnpkg.com)\n\n## Key features\n- 100% of codebase written in Typescript\n- Can be used at any nesting `layout.tsx` file. Root layout isn't required.\n- Fixed bug where built-in Next.js scroll restoration is not immediate\n- Fixed annoying bug where [scroll position forgotten by Next.js built-in scroll restoration.](https://github.com/vercel/next.js/issues/53777)\n- Extensive testing in different browsers with [Playwright](https://github.com/microsoft/playwright) testing library.\n## Presequences \nBefore you start, keep in mind following rules.\n- Keep disabled native `scrollRestoration` option in Next.js config to avoid conflicts.\n- **Skip this rule for Next.js [14.1.0](https://github.com/vercel/next.js/releases/tag/v14.1.0) and higher.** In case your Next.js version is less than [14.1.0](https://github.com/vercel/next.js/releases/tag/v14.1.0) then you should enable `windowHistorySupport` in your Next.js config under `expermimental` property.\n  [Since Next.js 14.1.0 browser history support is enabled by default.](https://github.com/vercel/next.js/pull/60557)\n```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n    experimental:{\n        //Only For Next.js versions prior to 14.1.0 because it is enabled by default since version 14.1.0 \n        windowHistorySupport:true \n    },\n}\nmodule.exports = nextConfig\n```\n\n\n## Usage\n\n### Step 1\nCreate component named `ClientSideScrollRestorer` in your `src` directory with `useScrollRestorer` hook and `\"use client\"` directive to prevent server errors.\n\n**src/ClientSideScrollRestorer.tsx**\n```tsx\n\"use client\"\nimport {useScrollRestorer} from 'next-scroll-restorer';\nconst ClientSideScrollRestorer = () =\u003e {\n    useScrollRestorer()\n    return \u003c\u003e\u003c/\u003e\n}\nexport default ClientSideScrollRestorer\n```\n### Step 2\nImport component created in a previous step to your root layout file (layout.tsx).\nWrap it wih [React](https://react.dev/reference/react/Suspense) `\u003cSuspense/\u003e` to avoid possible [client-side deopting for entire page](https://nextjs.org/docs/messages/deopted-into-client-rendering). \n\n**app/layout.tsx**\n```tsx\nimport ClientSideScrollRestorer from '../src/ClientSideScrollRestorer'\nimport {ReactNode, Suspense} from \"react\";\n\ntype Props = {\n    children: ReactNode\n}\nconst RootLayout = ({children}) =\u003e {\n    return (\n        \u003chtml lang=\"uk\"\u003e\n        \u003cbody\u003e{children}\u003c/body\u003e\n            \u003cSuspense\u003e\n              \u003cClientSideScrollRestorer/\u003e\n            \u003c/Suspense\u003e\n        \u003c/html\u003e\n    )\n}\n\nexport default RootLayout\n```\nIt can be any nesting layout shared by [group of routes](https://nextjs.org/docs/app/building-your-application/routing/route-groups) in case you do not want to enable scroll restoration for the whole application.\n\n----\n\nMade by [Revotale](https://revotale.com) ❤️.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRevoTale%2Fnext-scroll-restorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRevoTale%2Fnext-scroll-restorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRevoTale%2Fnext-scroll-restorer/lists"}