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:

search = (event) => {     event.preventDefault();     history.push({         pathname: '/results',         state: {             pattern: this.state.searchText,         }     }); } 

In the results class, I could get the state date with this.props.location.state.pattern.

So now I'm using next.js:

import Router, { withRouter } from 'next/router'  performSearch = (event) => {     event.preventDefault();     Router.push({ pathname: '/results', state: { pattern: this.state.searchText } }); }; 

In the results class, I use

static async getInitialProps({req}) {     return req.params; } 

I'm not sure if I have to add this to my server.js:

server.get('/results', (req, res) => {     return app.render(req, res, '/results', req.params) }) 

However, the function getInitialProps throws an error because req is undefined. Long text, short question: how to pass state or params to another page without using GET parameters?

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)