Build a Lightweight Full-Stack Headless CMS Using Next.js, Contentful, and GraphQL

Course details

With the growing popularity and widespread use of headless architecture in web development, it is important for web developers to stay ahead of the industry curve. Headless architecture keeps the frontend lightweight and more optimized. In this course, software engineer and educator Dakota Fabro guides you through building for clients who prefer to use a CMS with their websites so that you can provide solutions that are lightweight and intuitive. Learn to use Next.js, Contentful, and GraphQL to create a site that uses headless architecture. Then complete a capstone project to help you practice what you’ve learned in the course. By the end of this course, you will be able to build and maintain headless web projects, and you’ll be able to apply the skills and knowledge acquired from this course in your current or aspirational role.

Learning objectives
Build content entries in a Contentful (CMS) that can be queried with GraphQL via their Next.js frontend
Configure the server side of a Next.js project to run GraphQL queries
Configure a frontend preview site for content entries
Employ techniques that all allow for more control over styling the content being queried

Concepts

0. Introduction

01 - Introducing your full-stack headless CMS site
02 - What you should know
03 - How this course is structured

1. What's a Headless CMS Anyway

04 - What is a CMS
05 - Benefits of using a CMS
06 - Headless architecture explained
07 - Set up your free tier Contentful account

2. Next.js and Server-Side Rendering

08 - Next.js and headless architecture for full-stack happiness
09 - Set up the Next.js app and deploying to Vercel
10 - Test your API connection

3. Creating and Querying Contentful Content for Your Front End

11 - Create your first content entry
12 - Set up a Contentful preview site
13 - Familiarize yourself with GraphQL
14 - Challenge - Request content entry from the Contentful API
15 - Solution - Request content entry from the Contentful API

4. Plug 'n Play - Plug API into Your Front End

16 - Styling hacks - JSON payloads to styled content
17 - Challenge - Add styling to your front end
18 - Solution - Add styling to your front end

5. Capstone Introduction

19 - Purpose of the capstone project
20 - Capstone MVP guidelines

Conclusion

21 - Next steps - Capstone project