Hold on to Your Props!(creating components for every page in NextJS)

Making pages and an associated Page component is the name of the game for organizing your layout in React and NextJS. The page itself will route you to specific content and the Page component (note the capital P) can hold onto things like Navigation components, Footer components, Sidebar components and the like. The general rule is that pages will be wrapped in their Page component and render {props.children} so whatever content is within a page, and whatever you might want from it's parent <Page> will be rendered. This is redundant though, especially if you have a great many pages to wrap in a component and import that component and I can feel my knuckles aching just thinking about it. As a higher scope to hold the Page component, NextJS offers the _app.js page, which will live in the pages directory. This can be considered a "container" of the highest scope for NextJS and can be used to render the Page component and two props, namely the <Component> prop and pageProps. It will look something like this inside _app.js:

<Page>
  <Component {...pageProps} />
<Page>

Boom! A global <Page> that can wrap around the <Component /> prop. This represents an active page and any props passed to it will be received by the page itself. pageProps represent the initial props, preloaded by a fetch method and will be empty without a call to that method.
Woof! All that work (it's actually really quick once you see it in action) and now we can persist anything we want to display on every page we choose!