next-query-params

next-query-params

A small wrapper for use-query-params in Next.js apps.

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 only configures the provider for usage with Next.js and additionally re-exports all modules from use-query-params for convenience. Note that use-query-params and query-string is bundled in this library 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 just a small wrapper around use-query-params by Peter Beshai and uses the code that was collaboratively created in use-query-params#13. I mostly moved the code to a reusable library.