next-query-params
Convenient state management of query parameters in Next.js apps.
Persisting React state to query parameters is often a good idea:
- When the URL is shared, the app state is restored. Same applies to bookmarks.
- When using the browser back button, the state of the previous page is restored.
- When navigating forward to a page the user was already on, the state is reset.
This library is an adapter for use-query-params
to integrate with Next.js.
Installation
npm install next-query-params use-query-params
App Router
'use client';
import NextAdapterApp from 'next-query-params/app';
import {QueryParamProvider} from 'use-query-params';
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<QueryParamProvider adapter={NextAdapterApp}>
{children}
</QueryParamProvider>
</body>
</html>
);
}
Pages Router
import NextAdapterPages from 'next-query-params/pages';
import {QueryParamProvider} from 'use-query-params';
export default function App({Component, pageProps}) {
return (
<QueryParamProvider adapter={NextAdapterPages}>
<Component {...pageProps} />
</QueryParamProvider>
);
}
Usage
Please refer to the usage of use-query-params
.
import {useQueryParam, StringParam, withDefault} from 'use-query-params';
export default function IndexPage() {
const [name, setName] = useQueryParam('name', withDefault(StringParam, ''));
function onNameInputChange(event) {
setName(event.target.value);
}
return (
<p>My name is <input value={name} onChange={onNameInputChange} /></p>
);
}
Shallow routing (Pages Router-only)
NextAdapter
can be configured to opt-out of shallow routing. In this case server-side functions like getServerSideProps
will be run again when a query parameter changes.
import NextAdapterPages from 'next-query-params/pages';
import {QueryParamProvider} from 'use-query-params';
function Adapter(props) {
return <NextAdapter {...props} shallow={false} />;
}
export default function App({Component, pageProps}) {
return (
<QueryParamProvider adapter={Adapter}>
<Component {...pageProps} />
</QueryParamProvider>
);
}
Credits
This library is an adapter for use-query-params
by Peter Beshai and was originally based on the code that was collaboratively created in use-query-params#13.