Sentry Answers>Next.js>

Get URL Params Next.js 13

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:

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

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

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

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

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

  • Sentry BlogCommon Errors in Next.js and How to Resolve Them
  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • 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

Considered “not bad” by 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.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.