Params and searchParams

This page explains how to access and use URL parameters in Next.js through the params and searchParams objects.

URL parameter types

Next.js provides two key objects for accessing URL parameters:

params: Contains dynamic route parameters (segments in square brackets like [id])
searchParams: Contains URL query parameters (after the ? in URLs like ?lang=en)

Accessing parameters

In server components

Server components receive both params and searchParams objects as props that need to be awaited:

export default async function Page({
  params,
  searchParams,
}: {
  params: Promise<{ articleId: string }>;
  searchParams: Promise<{ lang?: "en" | "es" | "fr" }>;
}) {
  const { articleId } = await params;
  const { lang = "en" } = await searchParams;

  return (
    <div>
      <h1>Article {articleId}</h1>
      <p>Language: {lang}</p>
    </div>
  );
}

In client components

Client components must use the React use hook to access these values as they are not async components.

"use client";

import { use } from "react";

export default function Page({ params, searchParams }) {
  const { articleId } = use(params);
  const { lang } = use(searchParams);

  return (
    <div>
      <h1>Article {articleId}</h1>
      <p>Language: {lang}</p>
    </div>
  );
}

Creating links with parameters

Use the Link component to create URLs with both types of parameters:

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/articles/123?lang=en">English</Link>
      <Link href="/articles/123?lang=es">Spanish</Link>
    </nav>
  );
}

Good to know

params are available in both page and layout components
searchParams are only available in page components