Layouts

How Our Pages Look

If you've used Next.js before, you're likely very familiar with the purpose of the Layouts directory.

For those of you who are new or need a little refresher, check out their official documentation before continuing with how we utilize them.

Sometimes our clients wish to only have a specific set of pages on their website, with no desire to add or alter them dynamically through the CMS.

In that case, we create a fresh layout file for each page, pass the data to it, and add our components (wrapped in a Pinion).

We will also want to create a corresponding page file in the pages folder, to handle the data fetching and the rendering of said layout.

The majority of our clients opt for this method. It gives them the ability to:

• Add new pages

• Choose which components they want to appear on the page.

• Change the order in which they appear.

But how can we make dynamic layouts?

First we create a dynamic route file in the pages folder. We call this [slug].js.

In this file we do two things:

1. Create all the possible page paths from each page's slug using getStaticPaths.

2. Fetch the data for the page using the path as a query parameter.

3. Pass the data via props to the <Page /> component.

Now hop over to layouts/Page. This one layout can handle every page instance by being quite elegant in it's simplicity.

• Is there a hero? Great. Render the Hero.

• Did they select components? Great. Render them using our Rack Component.

The Archive directory is part of the R&P boilerplate.

Here we have two layouts: Archive and Archive Single.

Archive displays all posts that the client has made. This can be a blog, a set of case studies, training videos... you get the idea.

ArchiveSingle handles how each post is displayed on it's subroute.

These are fairly basic to begin with and you will likely need to customize these on a case-by-case basis. Take a moment to dig into pages/archive to see how we fetch data and handle pagination.