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.
npm install next-query-params use-query-params// app/layout.tsx
'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>
);
}// _app.tsx
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>
);
}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>
);
}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.
// _app.tsx
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>
);
}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.
