Superfilter AI
Headless CMSs with Next.js
3 hours, 30 minutes
CC
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.
Preview
CloseCourse Details
Published: July 9, 2024
Topics
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
Table of Contents
Introduction
Section Duration: 10 minutes
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.
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
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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