How to Get Query Parameters from URL in Next.js? - Coding

In Next.js, getting query parameters from the URL involves extracting key-value pairs from the URL string to access specific data or parameters associated with a web page or application, aiding in dynamic content generation and customization.

To get query parameters from the URL in next.js we have multiple approaches mentioned below:

Table of Content

Using useRouter
Using useSearchParams
Using getInitialProps
Using getServerSideProps

Prerequisites:

Understanding Query Parameters

Before diving into implementation, let’s understand what query parameters are. Query parameters are key-value pairs appended to the end of a URL, separated by a question mark (?) and ampersands (&). For example, in the URL https://example.com/products?id=123&category=electronics, id and category are query parameters.

Steps to Create a NextJS application

Step 1: First create a folder and navigate to that folder.

mkdir nextJS 
cd nextJS

Step 2: Now, create a nextJS application using the following command.

npx create-next-app demo

Project Structure:

nextJS Structure

The updated dependencies in package.json file will look like this.

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.1"
},

Using useRouter

To get query parameters from a URL in Next.js using useRouter, import useRouter from next/router, call it inside your functional component, and access the query object. This enables easy extraction of URL query parameters.

Example: Implementation to show how to get query parameters from the URL using useRouter.

JavaScript

//index.js

import { useRouter } from "next/router";

function Dashboard() {
    const router = useRouter();
    const { query } = router;

    const parameter1 = query.postName;
    const parameter2 = query.postId;

    return (
        <main style={{ height: "100vh" }}>
            <div>
                <p>
                    parameter1 is postName value
                    is: {parameter1}
                </p>
                <p>
                    parameter1 is postId:{" "}
                    {parameter2}
                </p>
            </div>
        </main>
    );
}

export default Dashboard;

Output:

getting params

Using useSearchParams

In Next.js, you can use the useSearchParams hook from the next/navigation package to access query parameters from the URL within functional components. By utilizing the .get method provided by useSearchParams, you can retrieve the value of specific query parameters. Ensure that the parameter names used with .get match those in the URL query string for accurate retrieval.

Example: Implementation to show how to get query parameters from the URL using useSearchParams.

JavaScript

//index.js

import { useSearchParams } from "next/navigation";

function Dashboard() {
    const searchParams = useSearchParams();
    let property1 = searchParams.get("name");
    let property2 = searchParams.get("postId");

    return (
        <main style={{ height: "100vh" }}>
            <div style={{ marginLeft: "10vw" }}>
                <h1>Query Parameters:</h1>
                <p>
                    parameter 1 value is{" "}
                    {property1}
                </p>
                <p>
                    parameter 2 value is{" "}
                    {property2}
                </p>
            </div>
        </main>
    );
}

export default Dashboard;

Output:

query params using useSearchParams

Example 2: Implementation to show how to get query parameters for multiple unknown params.

JavaScript

//index.js

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";

function Dashboard() {
  const searchParams = useSearchParams();
  //for multiple queries.
  const [queryParams, setQueryParams] = useState([]);

  useEffect(() => {
    const params = Object.fromEntries(searchParams.entries());
    setQueryParams(params);
  }, [searchParams]);

  return (
    <main style={{ height: "100vh" }}>
      <div style={{ marginLeft: "10vw" }}>
        <h1>Query Parameters:</h1>
        <ul>
          {Object.entries(queryParams).map(
              ([param, value]) => (
            <li key={param}>
              <strong>{param}:</strong> {value}
            </li>
          ))}
        </ul>
      </div>
    </main>
  );
}

export default Dashboard;

Output:

multiple parmeters using useSearchParams

Using getInitialProps

In Next.js, the getInitialProps method is utilized within page components to fetch data and pass it as props before rendering, essential for server-side rendering and pre-rendering pages. It enables data fetching from APIs, server-side rendering, SEO enhancement, and dynamic content generation by handling query parameters efficiently.

Example: Implementation to show how to get query parameters from the URL using getInitialProps.

JavaScript

//index.js

import Head from "next/head";

function Home({ param1, param2 }) {
    // Access param1 and param2 here
    
    const paramsdata = `Param1: ${param1}, Param2: ${param2}`;

    return (
        <>
            <Head>
                <title>Create Next App</title>
            </Head>
            <main style={{ height: "100vh" }}>
                <p>{paramsdata}</p>
            </main>
        </>
    );
}

Home.getInitialProps = async ({ query }) => {

    // Access query parameters from query object
    const { param1, param2 } = query;
    
    // Fetch data based on query parameters
    // Return data as props
    return { param1, param2 };
};

export default Home;

Output:

getting queries from getinitialProps

Using getServerSideProps

getServerSideProps in Next.js serves a similar purpose to getInitialProps, allowing data fetching before page rendering. It dynamically fetches data on each request, enhancing server-side rendering, SEO, and performance. With its ability to handle query parameters effectively, it enables dynamic content generation and personalized user experiences.

Example: Implementation to show how to get query parameters from the URL using getServerSideProps.

JavaScript

//index.js

import Head from "next/head";

function Home({ p1, p2 }) {

    // Access param1 and param2 here
    const paramsData = `Param1: ${p1}, Param2: ${p2}`;

    return (
        <>
            <Head>
                <title>Create Next App</title>
            </Head>
            <main style={{ height: "100vh" }}>
                <p>{paramsData}</p>
            </main>
        </>
    );
}

export async function getServerSideProps({
    query,
}) {
    // Access query parameters from query object
    const { p1, p2 } = query;
    // Fetch data based on query parameters
    // Returns data as props
    return { props: { p1, p2 } };
}

export default Home;

Output:

getting queries from getinitialProps

Conclusion

In a Next.js application, the useRouter and useSearchParams hooks provide powerful solutions for accessing and processing URL query parameters within functional components. These hooks enable seamless integration of URL parameters, facilitating dynamic workflows and simplifying parameter management.

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How to use Context API with TypeScript and Next.js?
When to Choose Enzyme Over React Testing Library?
NextJS 14 Folder Structure
Implementing Infinite Scrolling with React Hooks
Building a Component Library with React Hooks and Storybook

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16