NEW

Prismic offers an ideal solution to feature your e-commerce products in your promotional landing pages or inspirational content. View more

The Easiest Way to Add a CMS to Next.js

Written by Angelo Ashmore in concept on October 25, 2021

Adding a content management system (CMS) to Next.js is easy. All it requires is a CMS with some content and an API call to fetch that content.

The benefits of using a CMS are huge, even for personal sites. You can use one to manage content for small parts of a site like banner messages or to power whole sites with complete content flexibility.

This guide introduces the easiest way to add a CMS to Next.js. There are just three key parts to this tutorial:

  1. Create a new Next.js app.
  2. Set up a CMS (with Prismic, it's easier than it sounds!).
  3. Connect that CMS to your app using its API and a couple of helper packages.

You'll be prepared to explore all the benefits a CMS offers in a Next.js app by the end of this guide.

Let's get started!

Setup the app

We're going to keep things simple by using Next.js's create-next-app. Just follow the "Setup" section of their Getting Started guide and stop when you reach "Manual Setup."

Open the guide: Next.js - Getting Started

Once you start the development server, you can access your app at http://localhost:3000. You'll be greeted with a "Welcome to Next.js!" homepage that looks just like this:

Screenshot of the default Next.js homepage

This is where things get interesting — you're going to replace the static content on this page with content from a CMS. To do that, you'll first need to prepare your CMS.

Prepare the CMS

You're going to use Prismic as your CMS for this demo. Prismic is a headless, API-first CMS that lets you model your pages exactly as you want them. This means you can build a custom set of content fields for each page on your site. Prismic is the secret sauce that makes it easy to add a CMS to Next.js!

Create a CMS repository

First, sign up for a Prismic account here: Create your prismic.io account

Next, create a free Prismic repository by clicking the green "Create Repository" button on the Prismic dashboard (or just click this link: Create a new repository). Fill out the fields and remember your repository name; you'll need it later in Next.js.

Select your new repository in the dashboard and, when prompted, set your content's main language. Now, you can begin customizing your CMS by modeling your pages' content fields.

Model your content

To model your content, you'll build something called a Custom Type. A Custom Type is a collection of content fields for a specific kind of document. A page or a blog post, for example, could each be Custom Types. You're going to make a Custom Type for your Next.js app's homepage.

Click the green "Create Custom Type" button, and name it "Page". Above the name field, you'll see an option for "Repeatable Type" and "Single Type." You can leave that option on "Repeatable Type" since you could have multiple pages on your site managed in this CMS. Make sure the API ID under the name says "page," then click the green "Create new Custom Type."

Screenshot of the Create Custom Type page

You'll see a list of field types appear on the right side of the page and an empty drop zone in the center. You're only going to add a few fields to this Custom Type to start, but feel free to add more after this walkthrough.

Screenshot of the Custom Type builder page.

Now you can add a field for your homepage's "Welcome to Next.js!" heading. Click and drag a Title field from the right into the drop zone. When prompted, name the field "Greeting" and keep the other settings with their default values. Click the green "OK" button to add the field.

Screenshot of the Greeting field options page.

Next, add a field for some text below the greeting. Click and drag a Rich Text field and drop it below the Greeting field. This field can be named "Description". Again, leave the field settings with their default values and click the green "OK" button.

Screenshot of the Description field options page.

The last field you'll add is a special one. It will let you uniquely distinguish pages from each other. For example, you may want to label a page as "home" to identify it as the homepage. This kind of field is called a UID, or unique identifier. Click and drag a UID field from the list of field types and drop it above the Greeting field. Name the field "UID" and click the green "OK" button.

Screenshot of the completed Page Custom Type builder page.

Congratulations! You just built your first Custom Type! It's simple, but it will allow you or a content team to edit your homepage content with ease. And because you configured it as a "Repeatable Type," editors can use this Custom Type to manage other pages, too. Click the "Save" button in the top right corner of the page to save your new fields. Then click the left arrow in the top left corner to exit the editor.

Write your content

At this point, you've created a Prismic repository and created a Custom Type for your homepage. Now you can write some content for your app.

Within Prismic, click the Documents icon right below the Prismic logo in the top left corner. Next, click the green button with a pencil icon to create a new document. Since you only have a "Page" Custom Type in your repository, your new document will automatically be a Page.

Screenshot of an empty Page document editor page.

You'll see the UID, Greeting, and Description fields you setup in the previous step. Set the UID field to "home" since you'll be using this for your homepage. For the other two fields, go ahead and add some text. Greeting will replace your app's "Welcome to Next.js!" headline and Description will replace the short "Get started…" message.

Once your content is in there, click the "Save" button in the top right corner. Then click the "Publish" button in the same location and "Publish" again in the drawer that slides into view.

Alright! Your CMS has some content, so now it's time to bring it into Next.js.

Display content from the CMS

You're going to use Next.js's getStaticProps function to fetch content and display it on your page. You'll do two things in this function:

  1. Create a Prismic client for your CMS repository.
  2. Get your CMS content and pass it to your page.

Fetch your content

First, you'll need to install a couple of libraries to fetch and display your content. In a new terminal, run the following command in your app's folder:

npm i @prismicio/client@beta prismic-reactjs

You'll use @prismicio/client to create a Prismic client and prismic-reactjs to render your CMS content using React.

Add the following lines to the top of the homepage at pages/index.js.

import * as prismic from "@prismicio/client";
import { RichText } from "prismic-reactjs";

Then add the following code to the bottom of that file, which will fetch your homepage document from Prismic. Be sure to replace "nextjs-with-cms" with the name of your repository. In case you've forgotten it, your repository name is in the URL of your Prismic repository. For example, my-repo is your repository name if your URL is my-repo.prismic.io.

export async function getStaticProps() {
  // API endpoint for the Prismic CMS repository.
  const endpoint = prismic.getEndpoint("nextjs-with-cms");

  // Client used to fetch CMS content.
  const client = prismic.createClient(endpoint);

  // Page document for our homepage from the CMS.
  const page = await client.getByUID("page", "home");

  // Pass the homepage as prop to our page.
  return {
    props: { page },
  };
}

You now have access to the homepage document in your page using the page prop! Now all that's left is to display it on your page.

Display your content

First you'll need to get the page prop from your page component. Around line 8 of your index.js file, you can modify your Home component like the following code:

// Add the `page` prop in the Home component.
export default function Home({ page }) {
  // Contents of the component...
}

Now that you have access to your homepage CMS content, you can use your Greeting field for the heading at the start of the page.

Around line 18, you'll see the following <h1> element with the "Welcome to…" message.

<h1 className={styles.title}>
  Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

Replace it with your CMS content. You can use the RichText.asText() function from prismic-reactjs to render your field. Replace the contents of the <h1> element with the following:

<h1 className={styles.title}>
  {RichText.asText(page.data.greeting)}
</h1>

You can do something similar for your Description field using the <RichText> component. While RichText.asText() renders plain text, <RichText> renders HTML elements. This will automatically add, for example, <p> and <strong> elements based on the field's content.

Around line 22, you'll see the following <p> element with the "Getting started…" message.

<p className={styles.description}>
  Get started by editing{" "}
  <code className={styles.code}>pages/index.js</code>
</p>

Replace it with the following code to display your CMS content in its place:

<div className={styles.description}>
  <RichText render={page.data.description} />
</div>

Save the file and, like ✨magic✨, your CMS content will appear on the page. In case you closed the Next.js browser window, your app should be running at http://localhost:3000.

Screenshot of the default Next.js homepage with CMS content.

To really demonstrate the power of a CMS, go back into Prismic and edit the content. Make some changes to your homepage document, save it, and publish it, just like earlier. Once your changes are published, refresh your Next.js browser. The page should display your content changes without having touched your code. How ✨magical✨ is that?

So far, you've only set up your homepage to pull in CMS content. You could, however, manage other page content in exactly the same way. You can manage other pages by creating a new Page document in Prismic and an accompanying file in Next.js. The new page file in your project would just need an updated getStaticProps function with a different UID:

// "home" can be replaced with any page's UID from Prismic.
const page = await client.getByUID("page", "home");

By changing "home" to a different page UID, you can fetch content from other documents in the CMS. You could create an About Us page with a UID of "about-us," for example.

This is a simple way to manage page content in Next.js that you can expand easily based on your content needs.

Wrap up

In a short amount of time, you generated a fresh Next.js app, created a CMS repository on Prismic, modeled your content, and connected it to your app. Next.js and headless CMSs like Prismic make this easy and flexible.

With this foundation, you can experiment on your own and play around with your CMS and Next.js app. Try adding an image field to your homepage on your own. Or for a bigger challenge, build a new Custom Type for a blog post.

If you are looking for a more guided introduction to what Prismic offers, check out Prismic's full Next.js guide where you can learn how to generate dynamic pages and support live content previews.

Good luck and have fun!

Profile picture

Angelo Ashmore

Developer Experience Engineer at Prismic focusing on Gatsby, React, and TypeScript, in no particular order.