Introduction

In the ever-evolving world of web development, Next.js has emerged as a powerful tool for building React applications. With the release of Next.js 13, developers have been introduced to new ways of handling search parameters, especially when dealing with server-side rendering (SSR). This article will guide you through the intricacies of searchParams in both client and server components of Next.js 13.

---

How to Get searchParams in Client Components

In client components, Next.js 13 introduces a hook called useSearchParams. This hook allows you to read the current URL's query string straightforwardly. It returns a read-only version of the URLSearchParams interface, which provides utility methods for reading the URL's query string.

For instance, if you want to retrieve the value of a search parameter from the URL /dashboard?search=my-project, you can do so as follows:

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const search = searchParams.get('search')

  return <>Search: {search}</>
}

This hook is particularly useful in client components, but it's essential to note that it's not supported in server components to prevent stale values during partial rendering.

---

How to Get searchParams in Server Components

While the useSearchParams hook is a boon for client components, server components require a different approach. The challenge arises when you want to use server-side rendering (SSR) for routes with search parameters, like /posts?page=2.

To get the search parameters on the server, you can utilize the special file page.jsx/page.tsx. This component receives a props object that contains the search parameters. Here's a basic example:

type Props = {
  params: {},
  searchParams: { [key: string]: string | string[] | undefined },
}

export default function Page(props: Props) {
  const searchParams = props.searchParams;
  const page = searchParams.page;
  return <h1>My Page</h1>
}

However, if you need to pass these search parameters to a server component, you'll need to first retrieve them in the page.tsx and then pass them as props:

import MyServerComponent from "./MyServerComponent";

type Props = {
  params: {};
  searchParams: { [key: string]: string | string[] | undefined };
};

export default function Page(props: Props) {
  const searchParams = props.searchParams;

  return <MyServerComponent searchParams={searchParams}></MyServerComponent>;
}

---

Conclusion

Handling search parameters in Next.js 13 can seem daunting at first, especially when juggling between client and server components. However, with the right tools and understanding, it becomes a breeze. Whether you're using the useSearchParams hook for client components or passing search parameters to server components, Next.js provides a robust and efficient way to manage your application's dynamic content. As always, make sure you are following me to leverage the latest features and best practices.