Adding common header and footer in Next.js.

How best to add a common header and footer to every page.
I saw an example via code but can remember how in Next,js codegen.

Hey @patient_peacock. Do you want to do it in code or in the studio?

The easiest way to do this from within studio is to create a component that includes the header and footer as well as a slot in the middle for the main body content to be filled in.

And then in the left sidebar, in the components tab, you can find that component you just created and right click it to make it the default page wrapper. That means all new pages will automatically have this component be placed in it

Awesome - and can I apply this “default page wrapper” to existing pages?

This only applies to new pages and won’t affect your existing pages, but once this root component is present on pages, then you can make updates to it and they will be reflected on all the pages that it’s in