Search params for server components in Next JS 13 app directory

Question

When using the file structure app -> explore -> page.tsx and using the following code to get the search params:

export default function ExplorePage({ searchParams }: { searchParams: { search: string | undefined } }) {
  const { search } = searchParams

I can not run npm run build. It gives this error:

Type error: Page "app/explore/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ searchParams: { search: any; }; }", got "PageProps".
          Invalid configuration:
            Expected "{ search: any; }", got "Record<string, string | string[]> | undefined".
              Expected "{ search: any; }", got "undefined".

However, I can run the site with npm run dev and it works fine without errors.

Here are the version numbers from the package.json file:

"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",

Now, what I am doing wrong to get this error? Next Js 13 is brand new and the app directory is still in beta so it might be a bug.

I have tried:

Testing different types to see if the error had something to do with this setup.
Tried first to use the Next Router which of course did not work since this is a server component.

I'm getting the same thing. It happens when I introduce another level of routing, which worked fine in the existing pages format. `app -> bingwallpapers -> [id] -> page.tsx` This all works fine. But when I introduce another page: `app -> bingwallpapers -> tags -> [tag] -> page.tsx` The build fails — Amarjeet Singh Rai, Oct 28 '22 at 09:17

score 9 · Answer 1 · answered Oct 30 '22 at 03:57

try this

type Props = {
  params?: {
    num?: string;
  };
  searchParams?: {
    search?: string;
  };
};

export default function Page(props: Props) {...}

change searchParams to searchParams?
change search: string | undefined to search?: string <- bug?

It works perfectly for me

score 0 · Answer 2 · answered Feb 06 '23 at 18:39

Append export const dynamic = 'force-dynamic' to your page.

I was getting the same error, searchParams worked in dev mode, but not in prod.

e.g.

type Props = {
  searchParams?: {
    s?: string;
  };
};
export default async function Page(params: Props) {
  // ...
}
export const dynamic = 'force-dynamic'

Search params for server components in Next JS 13 app directory

2 Answers2