How does a Headless CMS work (explained simply)

Adrian Twarog · Beginner ·🏗️ Systems Design & Architecture ·8mo ago

Key Takeaways

Explains how a headless CMS works and builds a working example using Next JS and a backend CMS

Original Description

If you’re wondering How does a Headless CMS work, in this video I’ll explain it and I’ll show you by putting together a working example in just 10 minutes. 00:00 - Introduction & Overview 00:15 - Chapter 1 - What is a Headless CMS 00:45 - Chapter 2 - What we will Build - Headless CMS Demo Example 01:00 - Chapter 3 - Frontend for Headless CMS on Next JS 01:37 - Chapter 4 - Backend Headless CMS on Wix Studio 02:04 - Chapter 5 - Add Content to Headless CMS 02:32 - Chapter 6 - Install & Setup Headless NPM Package (OAuth) 03:20 - Chapter 7 - Add Headless CMS Content to Next JS (API) 03:58 - Chapter 8 - Fetch Data, Queries & Updates with Headless CMS 05:57 - Chapter 9 - Styling the Design of the Headless CMS site 06:48 - Chapter 10 - Publishing Headless CMS Site 07:59 - Summary and Key Takeaways ⛌ Try Wix Studio: https://wix.com/studio/?utm_campaign=pa_influencers_community_adrian^social&experiment_id=^youtube_channel 🏴 Additional Headless CMS Resources! https://www.wix.com/studio/blog/headless-cms https://www.wix.com/studio/developers/headless https://www.wix.com/studio/developers/headless/templates https://dev.wix.com/docs/go-headless Firstly, A Headless CMS is really just made up of just two things. The CMS. This is your content management system, and often found in the backend. It’s like a repository or database of your content that is interconnected. Secondly, and headless part. Headless essentially means you can access this data without any sort overhead, often through an API. This allow you to build on your own ecosystem, be that on react, php or even python. The point of a CMS which is Headless is to give developers the freedom to manage their data without having it locked in to a specific frontend structure. It also provides the freedom to access that content via multiple apps or systems. With that said, lets build a basic Headless site. For this part I’m going to create this small react app which will be hosted on the Next JS platform. Content for thi
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related Reads

📰
Presentation: The Rust High Performance Talk You Did Not Expect
Learn how Rust's performance capabilities and compile-time safety can improve delivery velocity and reduce engineering overhead in high-performance caching services
InfoQ AI/ML
📰
I Use These Two Books for System Design & DSA — That’s It, No Clutter
Learn the two essential books for system design and data structures and algorithms to crack interviews at top tech companies
Medium · Programming
📰
What Really Happens When You Call setState() in Flutter?
Learn how Flutter's rebuild process works and the efficiency of setState() to improve your app development skills
Medium · Programming
📰
Failover in System Design: Why Every Reliable System Needs a Backup Plan
Learn why a reliable system needs a backup plan and how to design for failover to ensure high availability
Medium · Programming

Chapters (12)

Introduction & Overview
0:15 Chapter 1 - What is a Headless CMS
0:45 Chapter 2 - What we will Build - Headless CMS Demo Example
1:00 Chapter 3 - Frontend for Headless CMS on Next JS
1:37 Chapter 4 - Backend Headless CMS on Wix Studio
2:04 Chapter 5 - Add Content to Headless CMS
2:32 Chapter 6 - Install & Setup Headless NPM Package (OAuth)
3:20 Chapter 7 - Add Headless CMS Content to Next JS (API)
3:58 Chapter 8 - Fetch Data, Queries & Updates with Headless CMS
5:57 Chapter 9 - Styling the Design of the Headless CMS site
6:48 Chapter 10 - Publishing Headless CMS Site
7:59 Summary and Key Takeaways
Up next
Forget Fable 5: Build Your SaaS with Opus 4.8! #shorts
Income stream surfers
Watch →