DEV Community

Discussion on: Layout Persistence in Next.js

View post
Collapse
 
iigorcunha profile image
Igor Cunha •

Any idea, how to implement Layout with typescript?

Collapse
 
ozanbolel profile image
Ozan Bolel • 
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 • 
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.