How can I get query parameters from the URL?

Lazar Nikolov

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


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:

// 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.


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:

// 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

At the time of writing this answer, Next.js doesn’t support query parameters in server components. You can only obtain the query parameters from the page that renders the server component:

// app/users/[userId]/page.tsx import { User } from '../../components/User'; export default function UserProfile({ params, searchParams, }: { params: { slug: string }, searchParams?: { [key: string]: string | string[] | undefined }, }) { const { userId } = params; // ... }

Further Reading

Get Started With Sentry

Get actionable, code-level insights to resolve Next.js performance bottlenecks and errors.

Run the line of code below to:

  1. Create a free Sentry account

  2. Run the CLI install command to automatically add the Sentry SDK to your project:

    npx @sentry/wizard@latest -i nextjs
  3. Start capturing errors and performance issues

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.