Seeking Advice on Layout Wrapping Approach for Pages

[ramonmalcolm10]

Can anyone advise if this approach is recommended and what potential drawbacks it might have?

Point to note: <Layout> is required for all pages, but individual pages may also have their own specific layouts. I’m trying to determine if it would be best to directly wrap these pages with the default layout, or if the following approach is fine:

const page = pages[`./pages/${name}/page.tsx`] as {
    default: { layout?: (page: React.ReactNode) => JSX.Element };
};
const existingLayout = page.default.layout;
page.default.layout = (page: React.ReactNode) => (
    <Layout>{existingLayout ? existingLayout(page) : page}</Layout>
);