Discussion on: Layout Persistence in Next.js

[Ozan Bolel]

To have multiple layouts within the app. We wouldn't want all pages to share the same layout.

[Léo Stewart]

Oh ! That make sense. Maybe it could be easier with a custom hook then ?
Like :

import { useState } from "react";

const FirstLayout = ({ children }) => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <p> First Layout     
        <button onClick={() => setCounter(counter + 1)}>
          Clicked {counter} Times
        </button>
      </p>

      {children}
    </>
  )
}

export default FirstLayout

export function withFirstLayout (Component){
  Component.Layout = FirstLayout
  return Component
}

and the page :

import { withFirstLayout } from 'layout/FirstLayout'

const Home = () => {
  return  <div>  index   </div>
}
export default withFirstLayout(Home)

But when we change the layout we still have a reset of the old one