How do you read the current URL in a Next.js Client Component (usePathname, useSearchParams, useParams)?

Q: How do you read the current URL in a Next.js Client Component (usePathname, useSearchParams, useParams)?

**Target Audience:** Beginners preparing for Next.js interviews — assumes basic React hooks and the idea of Server vs Client Components. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against lab builds, `curl` and a real Chromium browser. ## 1. Why This Even Matters — A Story First A URL is like a parcel label: the street address (the path), the flat number written into the address (the dynamic part, like which product), and a sticky note on the side ("leave with neighbour", the query string). A delivery driver who reads the label once at the depot and never looks again will deliver the wrong parcel after the route changes. In Next.js, server-rendered layouts are that driver: they render once and are kept during navigation. Client Components can re-read the label every ti

The problem

Question presented to candidate: "You are building a product listing page in the App Router. Inside a Client Component you need the current path, the query string and the dynamic route values. Which hooks do you use, what does each return, and what goes wrong if you are careless with them?"

What a strong answer should cover:

All three come from next/navigation and only work in Client Components ('use client').
usePathname() returns the path string without the query; useSearchParams() returns a read-only URLSearchParams (get, getAll, has); useParams() returns the dynamic segments, with arrays for catch-all routes and {} when there are none.
They update on client navigation, which is why they work inside layouts where server props would go stale.
On a prerendered route, useSearchParams cannot know the query at build time, so the component must sit inside <Suspense> or the build fails; with Cache Components the same applies to usePathname and useParams for params not covered by generateStaticParams.
In a Server Component use the page params and searchParams props instead; to change the query, build a new URLSearchParams and call router.push/replace or render a Link.

Clarifying questions expected:

"Is the page prerendered or rendered per request?" — it decides whether a Suspense boundary is required.
"Should a filter change add a history entry?" — push versus replace.

Code / implementation expected: Yes — a Client Component reading the three values, and updating one query parameter.

nextjs
navigation
hooks
client-components

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for Next.js interviews — assumes basic React hooks and the idea of Server vs Client Components. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against lab builds, curl and a real Chromium browser.

1. Why This Even Matters — A Story First

A URL is like a parcel label: the street address (the path), the flat number written into the address (the dynamic part, like which product), and a sticky note on the side ("leave with neighbour", the query string). A delivery driver who reads the label once at the depot and never looks again will deliver the wrong parcel after the route changes. In Next.js, server-rendered layouts are that drive

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

Reading all three parts of the URL

// app/shop/[category]/[item]/ItemInfo.tsx
"use client";
import { useParams, usePathname, useSearchParams } from "next/navigation";

export default function ItemInfo() {
  const pathname = usePathname();         // "/shop/shoes/air-max"
  const searchParams = useSearchParams(); // read-only URLSearchParams for "?color=red&size=42"
  const params = useParams<{ category: string; item: string }>(); // { category: "shoes", item: "air-max" }

  return (
    <dl>
      <dt>Path</dt><dd>{pathname}</dd>
      <dt>Colour</dt><dd>{searchParams.get("color") ?? "any"}</dd>
      <dt>Sizes</dt><dd>{searchParams.getAll("size").join(", ") || "none"}</dd>
      <dt>Item</dt><dd>{params.item} in {params.category}</dd>
    </dl>
  );
}

Updating a query parameter and wrapping the hook in Suspense

// app/shop/SortButtons.tsx
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function SortButtons() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function setSort(sort: "asc" | "desc") {
    const next = new URLSearchParams(searchParams.toString()); // copy: the hook value is read-only
    next.set("sort", sort);
    router.replace(`${pathname}?${next.toString()}`);
  }

  return (
    <div>
      <button onClick={() => setSort("asc")}>Price up</button>
      <button onClick={() => setSort("desc")}>Price down</button>
    </div>
  );
}

// app/shop/layout.tsx — Server Component
import { Suspense } from "react";
import SortButtons from "./SortButtons";

export default function ShopLayout({ children }: { children: React.ReactNode }) {
  return (
    <section>
      {/* Lets the rest of the route be prerendered; the buttons fill in on the client */}
      <Suspense fallback={<div>Loading filters...</div>}>
        <SortButtons />
      </Suspense>
      {children}
    </section>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.