How to use query params in Next. Js ?

In Next.js, you can use query parameters to enable your application to respond to dynamic information in the URL. Query parameters are commonly used for search, filtering, pagination, and other purposes. In Next.js, there are several methods to retrieve and utilize query parameters.

Using the useRouter Hook

In Next.js functional components, you can use the useRouter hook to access current route information. This hook provides a query object containing all query parameters.

javascript
import { useRouter } from 'next/router';

const Posts = () => {
  const router = useRouter();
  const { search } = router.query;

  // You can use the query parameter `search` to filter posts, for example, by making an API request or filtering local data
  // ...

  return (
    <div>
      {/* Render filtered post list */}
    </div>
  );
};

export default Posts;

In this example, if the user accesses the URL /posts?search=nextjs, then router.query.search will be 'nextjs'.

Using getServerSideProps or getStaticProps

If you need to retrieve query parameters before page rendering, you can use getServerSideProps (for server-side rendered pages) or getStaticProps (for statically generated pages, though query parameters are only used for dynamic routes in this case).

javascript
export async function getServerSideProps(context) {
  const { query } = context;
  const { search } = query;

  // Now you can use the query parameter `search` to fetch data,
  // such as retrieving filtered post lists from an external API
  // ...

  return {
    props: {
      // The returned props will be passed to the page component
    },
  };
}

In this example, getServerSideProps runs on every request, allowing you to use query parameters on the server to fetch data and pass the results as props to the page component.

Using withRouter Higher-Order Component

For class components, you can use the withRouter higher-order component to inject route properties, including query parameters.

javascript
import { withRouter } from 'next/router';

class Posts extends React.Component {
  render() {
    const { search } = this.props.router.query;

    // Use the query parameter `search` to filter posts
    // ...

    return (
      <div>
        {/* Render filtered post list */}
      </div>
    );
  }
}

export default withRouter(Posts);

This allows you to access query parameters in class components and use them similarly to functional components.

Important Considerations

• When the component is first rendered, query parameters may not be immediately available because Next.js enables client-side navigation without page reloads. If you depend on query parameters for rendering content or triggering effects, you should handle cases where query parameters are not yet defined.
• For dynamic routes, you can use file and folder naming conventions to capture route parameters, such as [postId].js to obtain postId, and query parameters function similarly to the methods described earlier.

By using these methods, you can effectively leverage query parameters in Next.js applications to enhance page dynamism and interactivity.