Complete Guide to Passing State Data via Query Parameters in Next.js

Core Challenges of State Passing in Next.js Routing

In traditional React single-page applications, developers often use React Router's history.push method to navigate and pass state data. This method allows passing arbitrary data via the state property during navigation, which can be accessed in the target page through this.props.location.state. However, when migrating to Next.js, this pattern encounters challenges because Next.js's routing system is designed with a stronger emphasis on server-side rendering and URL semantics.

Passing State Data Using Query Parameters

Next.js recommends using query parameters to pass state data. This approach not only supports server-side rendering but also ensures URL readability and shareability. Below are the specific implementation steps:

Navigation Setup

In the source page, use the Router.push method and pass a query object to transmit data. For example, in a search functionality, it can be implemented as follows:

import Router from 'next/router';

class SearchPage extends React.Component {
  performSearch = (event) => {
    event.preventDefault();
    Router.push({
      pathname: '/results',
      query: { pattern: this.state.searchText }
    });
  };

  render() {
    return (
      <button onClick={this.performSearch}>Search</button>
    );
  }
}

Target Page Configuration

In the target page, use the withRouter higher-order component to inject routing properties, then access the query parameters via this.props.router.query. Here is a complete example:

import { withRouter } from 'next/router';

class ResultsPage extends React.Component {
  static async getInitialProps({ query }) {
    // Data can be retrieved via query parameters on both server and client
    const { pattern } = query;
    return { pattern };
  }

  render() {
    const { pattern } = this.props;
    return (
      <div>
        <h2>Search Results</h2>
        <p>Search pattern: {pattern}</p>
      </div>
    );
  }
}

export default withRouter(ResultsPage);

Alternative Solutions and Best Practices

Although query parameters are the recommended method in Next.js, in some scenarios, developers may prefer to avoid exposing data in the URL. In such cases, the following alternatives can be considered:

Using Local Storage

For sensitive or complex data, use localStorage or sessionStorage to store the state and then read it in the target page. For example:

// Store data in the source page
localStorage.setItem('searchPattern', this.state.searchText);
Router.push('/results');

// Read data in the target page
const pattern = localStorage.getItem('searchPattern');

State Management Libraries

For large-scale applications, using state management libraries like Redux or Zustand can more effectively manage global state, avoiding the complexity of passing data through routing.

Conclusion

In Next.js, passing state data via the query parameter in Router.push is an efficient method that supports server-side rendering. Although it differs from the traditional state passing approach in React Router, it offers better URL semantics and shareability. Developers should choose the appropriate method based on specific needs and, when necessary, combine it with local storage or state management libraries to meet more complex state passing requirements.