Best way to handle global header/footer

[TranquilMarmot]

I'd love to have a global header/footer for my app, but I'm not sure the best way to go about it.

For example, something like...

const Wrapper = ({ children }) => {
   return (
      <>
          <header>
             <h1>Cool Site</h1>
          </header>
          <main>{children}</main>
          <footer>Thanks for visiting</footer>
      </>
   );
}

export default Wrapper;

Obviously, it's easy to import this in every route and wrap them all in it, but it would be nice to not have to remember to do that 😅

Is there a better way to have this sort of "global wrapping component"?

It would also be super helpful to be able to access context here. For example, I store a user's current auth in the context. If I'm wrapping every route in this header/footer and I want to show the currently authenticated user in it, I have to grab the user out of the context in a GET handler for every route which is incredibly tedious.

It almost feels like I need a sort of middleware that can also wrap the result in a component?

[TranquilMarmot]

Ah, I see this is already being discussed here; #403

[marvinhagemeister]

A good way to set the header and footer is in _app.tsx. On top of that Fresh 1.4 will support layouts which has already landed in main.