Next.js: Router.push with state

Question

I\'m using next.js for rebuilding an app for server side rendering. I have a button that handles a search request.

In the old app, the handler was this one:

Answer 1

In next.js you can pass query parameters like this

Router.push({
    pathname: '/about',
    query: { name: 'Someone' }
})

and then in your next page (here in /about page), retrieve the query via the router props, which needs to be injected to Component by using withRouter.

import { withRouter } from 'next/router'

class About extends React.Component {
  // your Component implementation
  // retrieve them like this
  // this.props.router.query.name
}

export default withRouter(About)