# Next.js get query params from URL

> To obtain the query parameters from the URL, you can use the useRouter hook. This guide will help you set it up.

**URL:** https://sentry.io/answers/how-can-i-get-query-parameters-from-url/

---

## The Problem

Next.js allows us to create dynamic routes, which are routes that can accept
parameters. For example, we can create a route that accepts a `userId` parameter
and renders a user profile page for that user. But, how do we get the `userId`
parameter from the URL?

## The Solution

### Client-side

To obtain the query parameters from the URL, you can use the `useRouter` hook.
The hook is imported from different packages depending on the version of Next.js
and whether you use the `app` directory or the `pages` directory.

- If you're using the `pages` directory, or the Next.js version is 12 or earlier,
  import the hook from `'next/router'`;
- Otherwise, import the hoook from `'next/navigation'`;

After you import the hook, you can use it to get the query parameters from the
URL like so:

```javascript
// pages/users/[userId].js

function UserProfile() {
  const router = useRouter();
  const { userId } = router.query;

  return <div>User ID: {userId}</div>;
}
```

> Have in mind that the `router.query` object is empty on the initial render,
> because Next.js hasn't fetched the data yet. You can use the `router.isReady`
> property to check if the data is ready.

### Server-side

Since you can't use the `useRouter` hook on the server-side, you can obtain
the query parameters from the `ctx` argument of the `getServerSideProps` method.
The `ctx` argument is an object that contains the request and response objects,
as well as other useful information.

If the previous page was rendered on the server-side, here's how you would get
the `userId` parameter:

```javascript
// pages/users/[userId].js

export async function getServerSideProps(ctx) {
  const { userId } = ctx.query;

  return {
    props: {
      userId,
    },
  };
}

function UserProfile({ userId }) {
  return <div>User ID: {userId}</div>;
}
```

### Server Components (App Router)

In the App Router, page components receive `params` and `searchParams` as props. In Next.js 15+, these are Promises that must be awaited:

```javascript
// app/users/[userId]/page.tsx

export default async function UserProfile({
  params,
  searchParams,
}: {
  params: Promise<{ userId: string }>,
  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>,
}) {
  const { userId } = await params;
  const resolvedSearchParams = await searchParams;

  // ...
}
```

### Further Reading

If you're looking to get a deeper understanding of how Next.JS application monitoring works, take a look at the following articles:

- [Installing and configuring Sentry | Distributed Tracing in Next.js](https://www.youtube.com/watch?v=fKmXCrChW70)
- [Next.js Error and Performance Monitoring](https://sentry.io/for/nextjs/)
- [Sentry for Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
- [State of JS 2023 Reactions](https://syntax.fm/show/790/state-of-js-2023-reactions)
- [11 Habits of Highly Effective Developers](https://syntax.fm/show/778/11-habits-of-highly-effective-developers)

---

*Source: [sentry.io/answers/how-can-i-get-query-parameters-from-url/](https://sentry.io/answers/how-can-i-get-query-parameters-from-url/)*