How to use multiple query parameters in next.js 13? – Next.js

The Problem:

In Next.js 13, how can I create a dynamic route that accepts multiple query parameters and access their values in the corresponding page component? I have tried using a custom page file with the syntax [property1]&[property2].js, but the router.query object only contains a single string with all the parameters concatenated.

The Solutions:

Solution 1: Using `useSearchParams` hook

The useSearchParams hook from next/navigation API is specifically designed to work with search parameters in the URL. Here’s how to use it in Next.js 13:

1. Rename your file from [property1]&[property2].js to index.js (assuming it’s located in the root of your pages directory).
2. Pass query parameters to the URL, for example: /?property1=value1&property2=value2
3. Inside your component, import useSearchParams and retrieve the query parameters:

import { useSearchParams } from 'next/navigation';

const Component = () => {
  const searchParams = useSearchParams();
  const property1 = searchParams.get('property1');
  const property2 = searchParams.get('property2');

  console.log(property1); // value1
  console.log(property2); // value2

  return (
    <div>
      HELLO WORLD
    </div>
  );
};

export default Component;

Solution 2: Using `useRouter` hook

The useRouter hook can also be used to access query parameters. Here’s how:

import { useRouter } from 'next/router';

const Component = () => {
  const router = useRouter();
  const { property1, property2 } = router.query;

  console.log(property1); // value1
  console.log(property2); // value2

  return (
    <div>
      HELLO WORLD
    </div>
  );
};

export default Component;

Solution 2: Using Object Destructuring

To access the individual query parameters, you can use object destructuring on the `router.query` object:

import { useRouter } from "next/router";

const Component = () => {
  const { query } = useRouter();
  const { property1, property2 } = query;

  return (
    <div>
      HELLO WORLD
      <br />
      property1: {property1}
      <br />
      property2: {property2}
    </div>
  );
};

export default Component;

This approach allows you to access the individual property values as separate variables within your component.

Solution 3: Using `next/navigation`

In Next.js 13, you can utilize the next/navigation module to manage multiple query parameters within a dynamic routing structure. The solution involves:

1. Installing the next/navigation module:

   npm install next/navigation
   

2. Utilizing the useRouter hook from next/navigation to access the router object:

   import { useRouter } from 'next/navigation';
   

3. Using the router.query property to access the query parameters as a key-value object. For example, to access the property1 and property2 query parameters:

   const router = useRouter();
   const property1 = router.query.property1;
   const property2 = router.query.property2;
   

4. Remember to handle the query parameters within your component to display or process the data as needed. For instance:

   return (
     <div>
       {property1}
       {property2}
     </div>
   );
   

This solution allows for efficient handling of multiple query parameters in Next.js 13, providing flexibility and control over the routing and data retrieval process.

Video Explanation: