Using TS , Not children filed in props

[gd-cho]

When I use npx create-next-app@latest --typescript to build Next.js For TS , I'm import type NextPage has no children filed in props.
The props was a empty object.

dep version:
"next": "12.1.4",
"react": "18.0.0",
"react-dom": "18.0.0"

[icyJoseph]

Why would a page need to have that prop type built in?

Are you trying to do something like this?

// pages/another-page.tsx
import MyPage from './pages/my-page'

const AnotherPage = ()=> <MyPage><div>Injecting content</div></MyPage>

export default AnotherPage;

While that's technically possible, it seems prone to grow in complexity.

A NextPage conceptually is a top level abstraction that represents an entire route/page, and it's not necessarily a React Component.

Why not remove the NextPage type, and move that to be a Layout Component, living for example in components/, and then use it as such, a Layout component, across pages.

The docs document a case that resembles my assumption, https://nextjs.org/docs/basic-features/layouts#with-typescript.

[gd-cho]

I want to use children filed. How can I use?

const Layout: NextPage = (props) => {
  return (
    <>
      <main>{props.children}</main>
    </>
  );
};

[icyJoseph]

In this case, NextPage is not the type you want. Either do:

import type {ReactNode} from 'react';

type LayoutProps = {children?: ReactNode}
const Layout = (props: LayoutProps) => <div>{props.children}</div>

Or just use FC

import type {FC} from 'react';

const Layout: FC = (props) => <div>{props.children}</div>

Here's a bit more to read: https://www.carlrippon.com/react-children-with-typescript/ - but the learning is that NextPage is not a type to compose. It is something that Next uses as handover type between React components and their routing system.

In practice a NextPage cannot really have children coming through props. NextPage's can only have serialisable data coming in as props.

[gd-cho]

"@types/react": "18.0.0" have not the children filed , same as well as use FC type.

[icyJoseph]

Oh nice, I didn't know they removed the implied children from the react 18 types, that's actually nice!

Just type if yourself then, using ReactNode.

type LayoutProps = {children?: ReactNode}

[azizoid]

Still don't get why they did that, have to type it all the time manually