A CMS with Stackbit, Netlify and NextJS

French version:

Un CMS avec Stackbit, Netlify et NextJS

Xavier Dubois 🇫🇷 ・ Apr 21 ・ 5 min read

#tutorial #jamstack #cms #nextjs

Creating, hosting, and maintaining a CMS is not always an easy task.
We have a wide range of alternatives, each with its strengths and weaknesses.

Over the years and through various projects, I have implemented many of them: Wordpress, 100% custom CMS, Headless CMS with Contentful, Strapi... but I have never managed to meet all the criteria I was looking for:

• Simplicity
• Quick setup
• Low hosting cost (or even none, completely free!)
• Performant
• 100% customizable (there's nothing more frustrating than not being able to break free from the framework, right?)
• With a custom domain
• Retaining ownership of my data (hello Contentful!)
• GDPR compliant
• Easily integrating lambdas for form processing
• I know, it seems demanding, but I'm used to custom development and I like offering my clients a no-compromise solution.

I quickly became interested in JamStack, as it seemed that many of my criteria were met, but I hadn't yet figured out how to manage it professionally.

Understanding JamStack Architecture

The term "Jamstack" is an acronym for JavaScript, APIs, and Markup.
The main advantage of this architecture is that it eliminates the need for servers, which provides us with more security, performance, and easier content updates.

Thanks to static content generation, we don't even have to manage a database. Everything is versioned by Git, simplifying backup and history strategies, and even allowing us to precisely identify who made a change.

Stackbit

Stackbit is a SaaS service that facilitates the rapid creation of Jamstack sites, directly versioned on our Git repository.

The major asset of this service lies in its content management interface. The Stackbit Studio offers the ability to build a user interface intuitively while providing deep customization of elements. This allows editorial teams to manage content autonomously.

In addition, it offers a lot of customization, directly from the IDE and allows for easy tailoring.

Netlify

By default, Stackbit is capable of hosting the CMS, either with a custom domain or via a Stackbit subdomain.
However, I find their pricing too high ($90/month at the time of writing this article), and you must subscribe to the paid plan to benefit from a custom domain (among other things).

I also needed to have control over certain Netlify elements, such as functions.

Stackbit allows, in the site configuration, to choose whether it should manage hosting or not.
I configured my project on Netlify to automatically publish any commits to the "main" branch of my CMS.
And, since Netlify allows for a free custom domain, I was able to change the APEX of my site in seconds.

Setting up the stack

Creating the NextJS project is extremely simple and fast. I chose to let Stackbit do it.
I just had to choose the technology I wanted to use and a base theme.
Stackbit stored the project on my GitHub and automatically deployed the site to one of its Netlify instances.

In a matter of seconds, I had the following stack:

• A NextJS project
• A static site with my pages and data stored in Markdown
• A content editing interface directly on Stackbit
• A versioned project
• A site visible online on a Netlify subdomain

Configuring Netlify

As I want to host the site on a Netlify that I have complete control over, I added the project to my Netlify account and configured it.
Here too, it's really fast!
So, from the Netlify interface:

1. Import an existing project from a Git repository
2. Connect to your Git provider
3. Choose your project
4. Configure it as follows:
5. Add the NETLIFY_NEXT_PLUGIN_SKIP environment variable set to true
6. Deploy
7. Configure a custom domain if necessary
8. Configure Stackbit not to manage hosting directly in the Studio settings

Customization

Now that we have an initialized and hosted project, we need to be able to customize it to check all the boxes.

For this, Stackbit, once again, makes it easy for us.
The site structure is based on pages composed of sections (blocks).
Each page is based on a layout (a predefined set of sections).

We will focus on creating a Section, more specifically creating the error section.

In the CMS, I need to give the editorial team control over the text on the 404 page.
The module, very simple, thus allows to define:

• The page title
• The H1
• The H2
• The descriptive text

For this, we first need to create the YAML configuration file, .stackbit/models/ErrorSection.yaml:

type: object
label: Error Section
name: ErrorSection
extends:
  - Section
groups:
  - sectionComponent
fields:
  - type: string
    name: title
    label: Title
    required: true
  - type: string
    name: subtitle
    label: Subtitle
    required: true
  - type: string
    name: text
    label: text
    required: true

Then we create the NextJS component (simplified here to its maximum):
src/components/sections/ErrorSection/index.tsx:

import * as React from 'react';
import Picto from "../../atoms/Picto/Picto";

export default function ErrorSection(props) {
    return (
        <div className="container p-64 flex flex-col md:flex-row items-center justify-center px-5 text-gray-700">
            <div className="max-w-md">
                <div className="text-5xl font-dark font-bold">{ props.title }</div>
                <p
                    className="text-2xl md:text-3xl font-light leading-normal"> { props.subtitle }</p>
                <p className="mb-8">{ props.text}</p>
            </div>
            <div className="max-w-lg">
                <Picto
                    className={"cat"}
                    icon="cat"
                />
            </div>
        </div>
    );
}

Finally, we need to add the section to the components registry:
src/components/components-registry.ts:

const components = {
    // ...

    'ErrorSection': dynamic(() => import('./sections/ErrorSection'))
};

And that's it, our section is now visible in our sections library:

Create a page

We will now create the "not found" page from the Stackbit interface and add our section. The following file will be generated.

content/pages/page-not-found.md:

---
layout: PageLayout
title: "Not Found"
sections:
  - type: ErrorSection
    title: '404'
    subtitle: '...Page not found'
    button: 'Home'
    text: 'We are sorry, it seems you are trying to access a page that does not exist or is no longer available'
---

Since we have created a 404 page, we might as well tell Netlify to use it.
To do this, add the following block to the netlify.toml file:

[[redirects]]
   from = "/*"
   to = "/page-not-found"
   status = 404

Going further****

And since we're using the NextJS framework, we can do pretty much anything we want.
If you want to have internationalization, install the next-i18next or react-intl packages (even though I believe Stackbit has a simpler built-in approach).