What is the Typescript type of a next page function using the app router?

[majelbstoat]

When using the pages router, the typescript type of a page function is NextPage<MyPageProps> and GetServerSideProps provides strongly typed access to the incoming request:

import { GetServerSideProps, NextPage } from 'next'

const MyPage: NextPage<MyPageProps> = ({ user }) => {
  return <span>{user.name}</span>
})

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
  const { id } = query
  const user = await db.getUser({ id })

  return {
    props: {
      user,
    }
  }     
}

export type MyPageProps = {
  user: User
}
export default MyPage

What is the equivalent to these types when using the app router? I'm trying to get to something like this:

const MyPage = async ({ params: { id }) => {
  const user = await db.getUser({ id })

  return <span>{user.name}</span>
})

What type do I use, so that params is strongly typed? (As well as having access to searchParams, and the other things that are made available to page components?)

[IvanKuzyshyn]

I think it is NextPage if I get it correctly:

import { NextPage } from 'next';

Where NextPage is a generic wrapper for NextComponentType.

But you still have to specify the type for your params, for example:

type ExamplePageProps = {
	params: {
		locale: 'en' | 'es';
	};
};

 const ExamplePage: NextPage<ExamplePageProps> = async ({params}) => {
	const data = await sdk.getContentByLocale(params.locale) // just an example of usage
	
	return (
		<PageLayout>
			<PageContent data={data} />
		</PageLayout>
	);
}

[icyJoseph]

Hi,

As far as I remember, the library doesn't have a type signature for the page props, but it is pretty simple:

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

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}

I think part of the reason is that, the params input, is bound to your file structure (for example slug comes from app/[slug]/page.tsx), so they can't really give you that with vanilla TypeScript. They are working on a Typed Routes feature though, https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links, https://nextjs.org/docs/app/api-reference/next-config-js/typedRoutes, but I don't even know if helping type the Page component is part of the scope there.

I also think that maybe they could try to give some fix with the Next.js Plugin, https://nextjs.org/docs/app/building-your-application/configuring/typescript#plugin-features, which will have more features coming soon.

What the NextPage type on the other response does is, it simply annotate the props, and type the return, as well as make it optional to include a getInitialProps method on the page, which is a huge no go for me, since that API is not supported in App Router.

• NextPage here uses NextComponentType

  next.js/packages/next/types/index.d.ts

  Line 92 in eb6867f

  export type NextPage<Props = {}, InitialProps = Props> = NextComponentType<

• And NextComponentType allows for an optional getInitialProps https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/utils.ts#L12

[VirtuaBoza]

Here's some TS I wrote that satisfies that need:

declare global {
  type Prettify<T> = {
    [K in keyof T]: T[K];
  } & {};

  type UnionToIntersection<T> = Prettify<
    (T extends any ? (x: T) => any : never) extends (x: infer R) => any
      ? R
      : never
  >;

  interface PageProps<
    TParams extends string = never,
    TSearchParams extends string = never
  > {
    params: UnionToIntersection<
      {
        [K in TParams]: {
          [F in K extends `...${infer U}` ? U : K]: K extends `...${string}`
            ? string[]
            : string;
        };
      }[TParams]
    >;
    searchParams: { [K in TSearchParams]?: string | string[] };
  }
}

Use it like:

export default async function MyPage(props: PageProps<"id" | "...slug", "index">) {
  console.log(props.params); // { id: "foo", slug: ["one", "two"] }
  console.log(props.searchParams); // { index?: string | string[] | undefined }
  return <div>stuff</div>
}

[spietras]

Here is an alternative to the above:

type Empty = {
  [key: PropertyKey]: never;
};

type PathParameters<ParametersType extends string = never> = [ParametersType] extends [never]
  ? Empty
  : {
      [ParameterType in ParametersType as ParameterType extends `...${infer CatchAllParameterType}` ? CatchAllParameterType : never]: string[];
    } & {
      [ParameterType in ParametersType as ParameterType extends `[...${infer OptionalCatchAllParameterType}]` ? OptionalCatchAllParameterType : never]?: string[];
    } & {
      [ParameterType in ParametersType as ParameterType extends `...${string}` | `[...${string}]` ? never : ParameterType]: string;
    };

type QueryParameters<ParametersType extends string = never> = [ParametersType] extends [never]
  ? Empty
  : {
      [ParameterType in ParametersType]?: string | string[];
    };

type PageProps<PathParametersType extends string = never, QueryParametersType extends string = never> = {
  params: PathParameters<PathParametersType>;
  searchParams: QueryParameters<QueryParametersType>;
};

or a bit less verbose:

type PageProps<P extends string = never, Q extends string = never> = {
  params: [P] extends [never]
    ? { [k: PropertyKey]: never }
    : {
        [K in P as K extends `...${infer I}` ? I : never]: string[];
      } & {
        [K in P as K extends `[...${infer I}]` ? I : never]?: string[];
      } & {
        [K in P as K extends `...${string}` | `[...${string}]` ? never : K]: string;
      };
  searchParams: [Q] extends [never]
    ? { [k: PropertyKey]: never }
    : { [K in Q]?: string | string[] };
};

Usage is the same but it also handles optional catch-all path parameters:

export default async function MyPage(props: PageProps<"foo" | "...bar" | "[...baz]", "a" | "b">) {
  console.log(props.params); // { foo: string, bar: string[], baz?: string[] | undefined }
  console.log(props.searchParams); // { a?: string | string[] | undefined, b?: string | string[] | undefined }
  return <div>stuff</div>
}

[CoderDeltaLAN]

Short answer
In the App Router there is no NextPage type. A page is just a React Server Component that may be async. Type the props yourself.

// app/blog/[slug]/page.tsx
type PageProps = {
  params: { slug: string }
  searchParams?: { [key: string]: string | string[] | undefined }
}

export default async function Page({ params, searchParams }: PageProps): Promise<JSX.Element> {
  // fetch data ...
  return <article>{params.slug}</article>
}

Common patterns

• Dynamic routes
  Narrow params to your segments:

  type Props = { params: { userId: string; postId: string } }
  export default function Page({ params }: Props) { /* ... */ }

• Layouts

  // app/layout.tsx
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return <html><body>{children}</body></html>
  }

• Client components
  Add "use client" and type normally; no special Next.js type needed.

  "use client"
  export default function Button({ label }: { label: string }) {
    return <button>{label}</button>
  }

• Metadata

  import type { Metadata } from 'next'
  export const metadata: Metadata = { title: 'Blog' }
  
  import type { ResolvingMetadata } from 'next'
  export async function generateMetadata(
    { params }: { params: { slug: string } },
    _parent: ResolvingMetadata
  ): Promise<Metadata> {
    return { title: params.slug }
  }

• Route handlers

  import type { NextRequest } from 'next/server'
  import { NextResponse } from 'next/server'
  export async function GET(_req: NextRequest) { return NextResponse.json({ ok: true }) }

Notes

• NextPage is for the Pages Router only.
• Return type can be JSX.Element or Promise<JSX.Element> for async.

Docs

• Pages (App Router): https://nextjs.org/docs/app/api-reference/file-conventions/page
• Dynamic routes: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
• Metadata: https://nextjs.org/docs/app/api-reference/functions/generate-metadata

[icyJoseph]

Hi, we finally have an alternative! https://nextjs.org/docs/app/api-reference/config/typescript#route-aware-type-helpers