Answers by Sentry

Get URL Params Next.js 13

Shivan M.

The Problem

In Next.js 13, you may need to access the URL parameters at a particular route and use those parameters in a child component.

The Solution

Before Next.js 13, this was done through the useRouter() and router.query props. However, in Next.js 13 some hooks and props enable you to access the URL parameters depending on whether your component is a client or server component.

There are two different types of URL parameters we might want to access:

Each of these has a hook that lets you access it.

Query Strings

In a server component, you can access the query string by using the searchParams prop:

export default function Dashboard(props) {
  const qs = props.searchParams;

  return (
    <main>
      <div>
        <h1>Dashboard</h1>
        <p>Search Params are {qs.myParam}</p>
      </div>
    </main>
  );
}

The searchParams prop is an object that includes the parameters as top-level fields. In this scenario, we access the value of myParam.

If we navigate to /dashboard?myParam="Hello World" the rendered value will be “Hello World”.

In a client component, we can use the useSearchParams() hook:

"use client";

import { useSearchParams } from "next/navigation";

export default function Dashboard() {
  const searchParams = useSearchParams();
  const myParam = searchParams.get("myParam");

  return (
    <main>
      <div>
        <h1>Dashboard</h1>
        <p>Search Params are {myParam}</p>
      </div>
    </main>
  );
}

Dynamic Params

In this scenario, we want to access the URL parameter that is part of a dynamic route. Suppose we have the following route definition:

app/
dashboard/
├─ [dynamic]/
│  ├─ page.js

Similarly to search parameters, if we want to access the dynamic parameters in a server component, we can use the params prop:

export default function DynamicRouteParam(props) {
  const dynamicParams = props.params;

  return (
    <main>
      <div>
        <h1>Dashboard</h1>
        <p>Params are {dynamicParams.dynamic}</p>
      </div>
    </main>
  );
}

If we navigate to /dashboard/my-param, the value “my-param” would be rendered.

To achieve this for a client component, use the useParams() hook:

"use client";

import { useParams } from "next/navigation";

export default function DynamicClientRouteParam() {
  const params = useParams();
  const dynamicParams = params.dynamic;
  return (
    <main>
      <div>
        <h1>Dashboard</h1>
        <p>Params are {dynamicParams}</p>
      </div>
    </main>
  );
}

Additional Reading

You can read more about routing and the API functions related to URL parameters in the official Next.js documentation and API reference:

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.

learn more about sentryjoin our discord
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.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.