Built-in types for Pages (Types improving)

[present-g]

Hello, everyone!

Why do we have to manually define Page types? Why don’t you try giving us built-in types from the Next types? It’s a problem where there can be a lot of mistakes, especially after updating Next.

Just simple example:

Next types:

// ? Example of built-in NextPage type
export type NextPage<
  T extends {
    params?: Record<string, string>;
    searchParams?: Record<string, string>;
  } = {
    params: Record<string, string>;
    searchParams: Record<string, string>;
  },
> = {
  params: Promise<T['params'] extends object ? T['params'] : Record<string, string>>;
  searchParams: Promise<T['searchParams'] extends object ? T['searchParams'] : Record<string, string>>;
};

Some page:

import { NextPage } from 'next'

enum Mode {
  SSR = 'ssr',
  CSR = 'csr',
  All = 'all',
}

const TestPage = async ({ searchParams, params }: NextPage<{ searchParams: { renderMode?: Mode } }>) => {
  const { renderMode: mode = Mode.SSR } = await searchParams; // (parameter) searchParams: Promise<{renderMode?: Mode;}>
  const { some } = await params; // (parameter) params: Promise<Record<string, string>>

  return (
    <div>
      renderMode: {mode}; someParam: {some}
    </div>
  );
};

export default TestPage;

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page

[soapproject]

+1
also wish there’s an official layout type just like NextPage.

export type NextLayout<Params = undefined, ParallelRoutes = {}> = {
  children: ReactNode;
  params: Promise<Params>;
} & ParallelRoutes;