Create Custom Layouts in Next.js to Apply to All or Individual Pages

There are two main types of custom layouts you’ll find in many applications: Single Shared Layout and Per-Page Layout

The Single Shared Layout is a layout that you want every page of your application to share. This is so that components like your NavBar and Footer don’t have to be defined on every page that you build. We will accomplish this type of layout by creating a Layout component that will wrap our application in _app.js. Because _app.js is the root of the application and renders every page, our layout component will also get rendered on every page.

The Per-Page Layout lets you be a lot more fine grain about what pages receive what layout. If you have a big website and need to apply different layouts to different pages (auth, dashboard, settings, etc.) you will want to consider using this pattern. To achieve this pattern, we will define a getLayout function on the pages we want to receive a custom layout and in _app.js use that function to wrap the page in the layout with a default of rendering the page as is if the function is not defined.