{"id":15632945,"url":"https://github.com/amannn/next-query-params","last_synced_at":"2025-05-15T15:08:15.347Z","repository":{"id":40549052,"uuid":"403640465","full_name":"amannn/next-query-params","owner":"amannn","description":"Convenient state management of query parameters in Next.js apps","archived":false,"fork":false,"pushed_at":"2025-01-05T12:46:13.000Z","size":429,"stargazers_count":169,"open_issues_count":4,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-08T03:37:40.040Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amannn.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}},"created_at":"2021-09-06T13:51:40.000Z","updated_at":"2025-04-21T16:03:41.000Z","dependencies_parsed_at":"2022-07-12T18:02:48.486Z","dependency_job_id":"55d6822e-0bef-4819-8550-66a704e9c34e","html_url":"https://github.com/amannn/next-query-params","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":"0.20588235294117652","last_synced_commit":"707030cd0d8094d63b7849607ce6238e76ee77c8"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amannn%2Fnext-query-params","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amannn%2Fnext-query-params/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amannn%2Fnext-query-params/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amannn%2Fnext-query-params/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amannn","download_url":"https://codeload.github.com/amannn/next-query-params/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364270,"owners_count":22058878,"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","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":[],"created_at":"2024-10-03T10:46:02.020Z","updated_at":"2025-05-15T15:08:10.322Z","avatar_url":"https://github.com/amannn.png","language":"TypeScript","readme":"# next-query-params\n\n\u003e [!WARNING]  \n\u003e This project is in maintainence mode now. I've originally created it for the Pages Router, but with the introduction of the App Router there are now better patterns for handling query params in my opinion. Personally, I parse `searchParams` in pages with [`zod`](https://www.npmjs.com/package/zod). If you need something more advanced, you might want to have a look at [nuqs](https://nuqs.47ng.com/).\n\n![Gzipped size](https://badgen.net/bundlephobia/minzip/next-query-params) ![Tree shaking supported](https://badgen.net/bundlephobia/tree-shaking/next-query-params)\n\n\u003e Convenient state management of query parameters in Next.js apps.\n\nPersisting React state to query parameters is often a good idea:\n\n1. When the URL is shared, the app state is restored. Same applies to bookmarks.\n2. When using the browser back button, the state of the previous page is restored.\n3. When navigating forward to a page the user was already on, the state is reset.\n\nThis library is an adapter for [`use-query-params`](https://www.npmjs.com/package/use-query-params) to integrate with Next.js.\n\n## Installation\n\n```sh\nnpm install next-query-params use-query-params\n```\n\n### App Router\n\n```jsx\n// app/layout.tsx\n\n'use client';\n\nimport NextAdapterApp from 'next-query-params/app';\nimport {QueryParamProvider} from 'use-query-params';\n\nexport default function RootLayout({children}) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cQueryParamProvider adapter={NextAdapterApp}\u003e\n          {children}\n        \u003c/QueryParamProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Pages Router\n\n```jsx\n// _app.tsx\nimport NextAdapterPages from 'next-query-params/pages';\nimport {QueryParamProvider} from 'use-query-params';\n\nexport default function App({Component, pageProps}) {\n  return (\n    \u003cQueryParamProvider adapter={NextAdapterPages}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/QueryParamProvider\u003e\n  );\n}\n```\n\n## Usage\n\nPlease refer to the usage of [`use-query-params`](https://www.npmjs.com/package/use-query-params).\n\n```jsx\nimport {useQueryParam, StringParam, withDefault} from 'use-query-params';\n\nexport default function IndexPage() {\n  const [name, setName] = useQueryParam('name', withDefault(StringParam, ''));\n\n  function onNameInputChange(event) {\n    setName(event.target.value);\n  }\n\n  return (\n    \u003cp\u003eMy name is \u003cinput value={name} onChange={onNameInputChange} /\u003e\u003c/p\u003e\n  );\n}\n```\n\n## Shallow routing (Pages Router-only)\n\n`NextAdapter` can be configured to opt-out of [shallow routing](https://nextjs.org/docs/routing/shallow-routing). In this case server-side functions like `getServerSideProps` will be run again when a query parameter changes.\n\n```jsx\n// _app.tsx\nimport NextAdapterPages from 'next-query-params/pages';\nimport {QueryParamProvider} from 'use-query-params';\n\nfunction Adapter(props) {\n  return \u003cNextAdapter {...props} shallow={false} /\u003e;\n}\n\nexport default function App({Component, pageProps}) {\n  return (\n    \u003cQueryParamProvider adapter={Adapter}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/QueryParamProvider\u003e\n  );\n}\n```\n\n## Credits\n\nThis library is an adapter for [`use-query-params`](https://github.com/pbeshai/use-query-params) by [Peter Beshai](https://github.com/pbeshai) and was originally based on the code that was collaboratively created in [use-query-params#13](https://github.com/pbeshai/use-query-params/issues/13).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famannn%2Fnext-query-params","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famannn%2Fnext-query-params","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famannn%2Fnext-query-params/lists"}