How to Get query params using Server component in Next.js ?

NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications.

We will discuss different approaches to get query params using the server component in NextJS:

Steps to Create NextJS App:

Step 1: Create a NextJS application using the following command.

npx create-next-app@latest gfg

Step 2: It will ask you some questions, so choose the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Approach 1: searchParams parameter

In this approach, We have used a searchParams parameter to access the query params. searchParams provides us an object and by using that object we can access query parameters. In this approach, we have made a form. when you submit the form, all the values of the form will sent to the form data server component as a URL query.

Syntax:

export default function Page({ searchParams }) {

    const params = searchParams
  
    return (
        <>
            <h2> {params.value}</h2>
        </>
    )
}

Example 1: The below example demonstrate to get query params using searchParams parameter in server component.

JavaScript

//File path: /page.js
export default function Home() {

    return (
        <>
            <div style={{ margin: "25px" }}>
                <h1>Form</h1>
                <form method="get" action="/formdata">
                    <input type="text" name="name"
                        placeholder="Enter your Name" /> <br /> <br />
                    <input type="email" name="email"
                        placeholder="Enter your Email Id" /> <br /> <br />
                    <input type="number" name="age"
                        placeholder="Enter your Age" /> <br /> <br />
                    <button type="submit">Submit</button>
                </form>
            </div>
        </>
    );
}

JavaScript

//File path: formdata/page.js
export default function Page({ searchParams }) {

    const params = searchParams
  
    return (
        <>
            <h1>Form Data</h1>
            <h2>Name: {params.name}</h2>
            <h2>Email: {params.email}</h2>
            <h2>Age: {params.age}</h2>
        </>
    )
}

To run the application, use the following command:

npm run dev

Output:

Approach 2 : useSearchParams() method

In this approach, We are going to use a useSearchParams() method to access a query parameters in a client component. useSearchParams() provides a different methods such as get(), getAll(), keys(), values(), entries(), forEach() and toString() to access the query parameters.

Syntax:

'use client';
export default function Page() {

    const name = useSearchParams().get('name');
  
    return (
        <>
            <h2> {name}</h2>
        </>
    )
}

Example 2: The below example demonstrate to get query params using useSearchParams() method in a client component.

JavaScript

//File path: /page.js
export default function Home() {

    return (
        <>
            <div style={{ margin: "25px" }}>
                <h1>Form</h1>
                <form method="get" action="/formdata">
                    <input type="text" name="name"
                        placeholder="Enter your Name" /> <br /> <br />
                    <input type="email" name="email"
                        placeholder="Enter your Email Id" /> <br /> <br />
                    <input type="number" name="age"
                        placeholder="Enter your Age" /> <br /> <br />
                    <button type="submit">Submit</button>
                </form>
            </div>
        </>
    );
}

JavaScript

//File path: formdata/page.js
'use client';
import { useSearchParams } from "next/navigation"

export default function Page() {
    const name = useSearchParams().get('name')
    const email = useSearchParams().get('email')
    const age = useSearchParams().get('age')

    return (
        <>
            <h1>Form Data</h1>
            <h2>Name: {name}</h2>
            <h2>Email: {email}</h2>
            <h2>Age: {age}</h2>
        </>
    )
}

To run the application, use the following command:

npm run dev

Output: