NextJS Typescript Layout complaining about missing props

Question

Following the https://nextjs.org/docs/basic-features/layouts#with-typescript guide and modified my Home page that I want to use the layout on, as well as _app.tsx.

The guide didn't show what Layout.tsx should look like, and it's currently erroring with:

Type '{ children: ReactElement<any, string | JSXElementConstructor>; }' is not assignable to type 'IntrinsicAttributes & ReactNode'. Type '{ children: ReactElement<any, string | JSXElementConstructor>; }' is missing the following properties from type 'ReactPortal': key, type, props ts(2322)

I'm new to TS and I'm not sure how to pass the page to Layout.

Answer 1

The error messages can be quite confusing.

Firstly, to pass the component page into the Layout component, you need to add an attribute within the <Layout> tag with the name of the prop, in this case "children" like this: <Layout children={page}><Layout/>. Check this source out for more information: https://reactjs.org/docs/components-and-props.html

Also, functional components only accept one "prop" object as parameter to the function, and it is an object containing the other attributes. Check out this page https://fettblog.eu/typescript-react/components/ for more info. Basically you need to rewrite the function definition to :

export default function Layout (props : { children : string }) { ...