params and searchParams in Next.js

Next.js provides params and searchParams to read dynamic values from the URL. They serve different purposes and are used in different scenarios.

What is params?

params contains dynamic route values that come from the URL path itself. These values are defined using dynamic folders.

app/
 └── blog/
     └── [slug]/
         └── page.jsx

export default function BlogPage({ params }) {
  return <h1>Blog: {params.slug}</h1>;
}

URL: /blog/nextjs-routing
Result: params.slug = nextjs-routing

Why do we use params?

params is used when content is identified by a fixed structure, such as blog posts, product pages, or user profiles.

What is searchParams?

searchParams represents query string values that appear after the ? in the URL.

URL: /products?category=shoes&page=2

export default function ProductsPage({ searchParams }) {
  return (
    <p>
      Category: {searchParams.category} <br />
      Page: {searchParams.page}
    </p>
  );
}

Why do we use searchParams?

searchParams is used for optional values like filters, pagination, sorting, and search queries.

Where do we use params and searchParams?

• Server Components (recommended)
• Page components inside the app directory
• Layouts (for route-based data)

How do they work together?

A single page can use both params andsearchParams.

URL: /blog/react?sort=latest

params.slug = "react"
searchParams.sort = "latest"

Real-World Example

An e-commerce site uses params for product IDs andsearchParams for filters like price, size, and brand.

Interview Tip

Use params for required route values andsearchParams for optional query values.