Since we're aiming to create a single page application. We'll want to re-render parts of the page as the user interacts with it and maintain the state.
For this issue, let's separate the page into a header, body, and footer in the layout. When creating the header and footer, feel free to keep this simple for now. It doesn't have to be anything special as we can iterate on it later.
Since we're aiming to create a single page application. We'll want to re-render parts of the page as the user interacts with it and maintain the state.
For this issue, let's separate the page into a header, body, and footer in the layout. When creating the header and footer, feel free to keep this simple for now. It doesn't have to be anything special as we can iterate on it later.
See this documentation for more details: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern