What is the Typescript type for the parameters in a server component?

[vedantroy]

I recently discovered that the react server components in the app directory are passed a params object in the props.

I was wondering, is there a Typescript type for a react server component's props?

[icyJoseph]

Not right now I think. The docs define it on spot:

• https://beta.nextjs.org/docs/api-reference/file-conventions/page

type PageProps = {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}

One slight tricky, not impossible, but tricky, thing is that params would have a key bound to the path of the file (slug for example). I think the Next.js team is working on a type safe router as well, so perhaps it can be done by the framework.

Since an specific type or interface, is not documented at the moment, I'd just take it from the code snippet in https://beta.nextjs.org/docs/api-reference/file-conventions/page

[felipemullen]

Would love to have a reliable type that comes from next imports to assign to my page props. Hopefully this doesn't get forgotten by the team

[Irrelon]

IMHO it's worth making it a generic so you can specify either a string or string[] for slugs because you might want to use catch-all routes:

export interface NextPageProps<SlugType = string> {
	params: { slug: SlugType };
	searchParams?: { [key: string]: string | string[] | undefined };
}

[kasir-barati]

My temporary solution

First defined a generic interface:

export interface ServerSideComponentProp<
    Params,
    SearchParams = undefined,
> {
    params: Params;
    searchParams: SearchParams;
}

Then in my server side component:

// ./app/dashboard/[dashboardId]/page.tsx
import { ServerSideComponentProp } from './server-side-components-prop';

export default function Dashboard({
    params,
}: ServerSideComponentProp<{ dashboardId: string }>) {
    return <div>{params.dashboardId}</div>;
}

[Simoon-F]

I'm curious, theoretically nextjs should provide it.

[danbamber]

import { ReadonlyURLSearchParams } from 'next/navigation';
import { Params } from 'react-router-dom';

export type ServerProps = {
    params: Params;
    searchParams:  ReadonlyURLSearchParams;
};

not sure if this is a more official way? It's what I've just decided to use.

[Erik35072]

I recently discovered that the react server components in the app directory are passed a params object in the props.

I was wondering, is there a Typescript type for a react server component's props?

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

[LassazVegaz]

what does metadata have to do with server component props?

[richardweaver]

Dynamic metadata receives the same props and there's an example of the typing in the example:

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