next-query-params

next-query-params

Convenient state management of query parameters in Next.js apps.

Persisting React state to query parameters is often a good idea:

1. When the URL is shared, the app state is restored. Same applies to bookmarks.
2. When using the browser back button, the state of the previous page is restored.
3. When navigating forward to a page the user was already on, the state is reset.

Note that this library is a small wrapper for use-query-params to integrate with Next.js.

Installation

npm install next-query-params

// _app.js
import {NextQueryParamProvider} from 'next-query-params';

export default function App({Component, pageProps}) {
  return (
    <NextQueryParamProvider>
      <Component {...pageProps} />
    </NextQueryParamProvider>
  );
}

Usage

Please refer to the usage of use-query-params. This library configures the provider for usage with Next.js and additionally re-exports all modules from use-query-params for convenience.

Note that unlike use-query-params, this library has all dependencies included and compiled to support IE11.

import {useQueryParam, StringParam, withDefault} from 'next-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>
  );
}

// Note that if query parameters affect the server-rendered HTML of the page,
// you should define this function. Statically generated pages only have
// access to query parameters on the client side.
export function getServerSideProps() {
  return {props: {}};
}

Credits

This library is a small wrapper around use-query-params by Peter Beshai and is based on the code that was collaboratively created in use-query-params#13.

Changelog

2.1.2 (2021-12-17)

Bug Fixes

• Handle clearing of parameters and adding of parameters with an existing hash (#9) (0640b57)