Sentry Answers>Next.js>

How can I get query parameters from the URL?

How can I get query parameters from the URL?

Lazar Nikolov

The ProblemJump To Solution

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:

Click to Copy
// 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:

Click to Copy
// 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:

Click to Copy
// 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

  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • ResourcesSentry vs. Crashlytics: The Mobile Developer's Decision-Making Guide
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 100,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.

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