SSR with NextJs layouts (page dir)

So I have a shared layout in my app which looks like this

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

const Page: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
//Imagine the rest of the pages code instead of this
      <Home />
    </>
  );
};


Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <div className="flex h-screen flex-col">
      <Header />
      {page}
      <Footer />
    </div>
  );
};

I now need some data in the header of the page which I would prefer to ssr using getServerSideProps, however these props are only passed to the Page and not to the layout.
Any ideas on how I can do this?

SSR with NextJs layouts (page dir)

Similar Threads

Similar Threads

Similar Threads