Creating a reusable layout
Most websites feature headers and footers that are present across all their pages. With our knowledge of how pages work, you might be tempted to import a header component into every page component. But wait – what happens when you suddenly need to pass that component a new prop? Situations like these are why it's a good idea to reduce any duplication across pages. Instead, it's a much better option to create a layout component that contains a header and footer that we can then wrap our pages in.
In order to keep our components folder well structured, it's useful to create subfolders to house different parts of the site. Create a layout folder in the components folder to house components that are related to the layout. We will use these layout components across all our page files. Now, let's populate this folder with a header, footer, and layout component.
Important Note
In the code examples in this section, you will notice...