Headless CMSs with Next.js

Scott Moss

Scott Moss

Superfilter AI
3 hours, 30 minutes CC
Headless CMSs with Next.js

Course Description

Give users complete control over website content using a Headless CMS. Learn to integrate headless CMS platforms like Contentful into Next.js applications through content modeling, dynamic content fetching, and GraphQL queries. Implement server-side rendering, dynamic routes, and content previews. Explore caching strategies and industry-leading CMS options while building a fully functional website.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: July 9, 2024

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 10 minutes
  • Introduction
    Scott Moss introduces himself and provides background information on his experience with Headless CMSs. He explains that the best way to use a Headless CMS is to integrate it into an existing website, and demonstrates this by showing a fully built Next.js website that he will be making dynamic using a Headless CMS.
  • Course Setup
    Scott shows a preview of the website that will be used throughout the course and explains the approach he will take in building and integrating the CMS. He also provides instructions for setting up the project and gives an overview of the website's structure and content.

Contentful Headless CMS

Section Duration: 43 minutes
  • Headless CMS & Industry Overview
    Scott provides an overview of headless CMS (Content Management System) and discusses its history and evolution, the different types (open source and closed source), and some popular examples such as Sanity IO, Contentful, and Strapi.
  • Setup Contentful
    Scott guides students on how to obtain the necessary .env values from Contentful and provides an example file for reference. The instructor also discusses the challenges of data modeling for a headless CMS and emphasizes the importance of considering the content team's needs when designing the data model.
  • Contentful API Setup
    Scott identifies the elements on the website that need to be dynamic, such as the hero section with its title, description, and links. He explains the importance of deciding which elements should be editable by non-technical team members and which should be fixed. He also demonstrates how to remove the content layer integration and create a GraphQL content fetcher to retrieve the dynamic content from the CMS.
  • Content Model in Contentful
    Scott explains how to create a content model in Contentful. He demonstrates the process of creating fields for the hero, such as pre-title, title, subtitle, and call-to-action buttons. He also explains the options and configurations available for each field. The instructor emphasizes the importance of designing a flexible and reusable schema to take advantage of server components in Next.js.

Dynamic Content & Image Assets

Section Duration: 44 minutes
  • Querying Content with GraphQL
    Scott demonstrates how to create a new hero content item. He also demonstrates how to use the Apollo Studio Explorer Sandbox to test the GraphQL query that will be used to retrieve the hero content item data.
  • Pulling Content into Next.js
    Scott demonstrates how to fetch data from a CMS using GraphQL queries. He explains how to type check the returned data and dynamically display the fetched content on a Next.js page. Scott also briefly discusses caching with Next.js and how to break the cache to ensure that updated content is displayed.
  • Content Modeling Images
    Scott discusses the process of creating a content model for a website's logo wall. He explains how to analyze the code to determine the necessary fields for the content model and then demonstrates how to create and publish assets in Contentful. Scott also shows how to query the assets using GraphQL and integrate the query into the application code.
  • Loading Images into Next.js
    Scott explains how to configure Next.js to allow images from a specific domain to be loaded using the image component. He walks through the process of adding the domain to the Next.js config file and demonstrates how to use the image component to display images from Contentful. He also discusses options for controlling the order of the images and briefly mentions versioning content.

Dynamic Paths & Previewing Content

Section Duration: 1 hour, 44 minutes
  • Navigation Collection
    Scott demonstrates how to add content to a webpage and control its order using a headless CMS. He shows how to create a navigation collection in Contentful, add buttons to the navigation, and then query and display the navigation links on the webpage.
  • Content Blocks & Posts
    Scott discusses the process of making a dynamic page in a static site using Next.js and a headless CMS. He explains how to create a content model for a customer post, including fields for title, slug, body, and customer. He then demonstrates how to query the customer post data using Apollo and Next.js, and create a dynamic route for the customer post page.
  • Dynamic Content Fetching
    Scott demonstrates how to fetch data from a CMS by making an API call to retrieve content based on a dynamic route parameter (slug), and then render the fetched data on the page. He also introduces the contentful-rich-text-renderer component and shows how to use it to render JSON content from the CMS.
  • Pre-rendering Dynamic Routes
    Scott explains how to pre-render dynamic pages in Next.js using the `generateStaticParams` function. He demonstrates how to create a new query to fetch the slugs for the dynamic pages and then use that data to generate an array of objects with the slug property.
  • Content Previews in Contentful
    Scott introduces the concept of previews in a headless CMS and explains how they are implemented in Contentful. Previews allow users to see draft content on the website without publishing it.
  • Adding Content Preview Route
    Scott guides students through the process of enabling draft mode in a Next.js application connected to Contentful. He explains how to create an API route, set up a secret for authentication, and handle the logic for redirecting to the previewed content. He also demonstrates how to pass the draft mode parameter to GraphQL queries to fetch draft content.
  • Previewing Content Q&A
    Scott addresses questions about multi-tenancy and how CMS platforms handle simultaneous editing of the same content. He also discusses the integration of CMS platforms with Vercel's draft capabilities, implementing A-B testing with a CMS, and incremental server rendering.
  • Caching
    Scott explains how caching works in Next.js and demonstrates two ways to break the cache. The first method involves setting a revalidation interval using the `revalidate` property in the `fetch` function. The second method involves creating a route in the API folder and setting up a webhook on Contentful to trigger a revalidation of specific cache tags. This allows for the display of new content without rebuilding the entire site.
  • Resources & Next Steps
    Scott discusses various CMS options such as Builder, Prismic, Storyblok, and Framer, highlighting their unique features and use cases. He also addresses common questions about using headless CMSs outside of static sites and explores the potential for using CMSs in mobile apps and other scenarios.

Wrapping Up

Section Duration: 6 minutes
  • Wrapping Up
    Scott wraps up the course by providing some tips and best practices for configuring CMSs, such as not letting content teams mess with the models, observing and improving the schema based on the content team's needs, and starting slow with implementing changes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now