DEV Community

Discussion on: Layout Persistence in Next.js

Collapse
ozanbolel profile image
Ozan Bolel Author
import * as React from "react";
import { NextPage } from "next";

type Page = NextPage & { Layout?: React.FC };
Enter fullscreen mode Exit fullscreen mode
Collapse
iigorcunha profile image
Igor Cunha

Thanks, I was blowing my mind trying to figure that.

Thread Thread
pikeas profile image
Aris Pikeas

Could you share a bit more context on how you got this working with Typescript?Component.layout is throwing "unsafe assignment of an any value".

Thread Thread
ozanbolel profile image
Ozan Bolel Author
import * as React from "react";
import { NextPage } from "next";

type Page = NextPage & { Layout?: React.FC };

const MyPageComponent: Page = () => {
  return null;
}

export default MyPageComponent;
Thread Thread
pikeas profile image
Aris Pikeas
type Page = NextPage & {
    layout?: (props: { children: ReactNode }) => JSX.Element
}
Enter fullscreen mode Exit fullscreen mode

This seems to have done the trick for me when not using fat-arrow functions.