Handling Previews in a Headless Architecture — Strapi and Next.js

There is an ongoing shift in content management from traditional CMS to headless CMS. A headless CMS allows you to completely separate your content management system from the presentation layer. The content is made available via API and can be consumed in any kind of frontend, from websites to mobile apps.

Using headless CMSs has opened up a new way of building websites, known as pre-rendering. It is one of the best-known techniques in Jamstack, in which the website is compiled into a set of static assets like prebuilt HTML, CSS, and JavaScript files with the help of a static site generator (SSG). During the build time, the files are created by collecting the data from a headless CMS. These files are cached to a content delivery network (CDN) and served to a user on each request from the nearest CDN node. This improves speed and response times and reduces hosting costs.

However, content creators need to preview their content before publishing it to production, meaning they need to wait for an entire build to complete before they can view their content. To solve this problem, a preview mode allows editors to view their changes on the fly.

In this tutorial, you’ll learn to implement a preview system when working with a headless CMS like Strapi. You’ll implement the frontend in Next.js for creating content previews.

Read the full blog on Strapi.

Thanks for reading 💜

I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through TwitterLinkedInGithub or send me an Email.

Ravgeet, Full Stack Developer and Technical Content Writer

--

--

--

Software Engineer at CloudAnswers / Full Stack Developer / Technical Content Writer / React, Vue, Flutter, Laravel, Node, Strapi, Python / Visit ravgeet.in

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Serving Angular locally with https

“this” keyword in JavaScript

JavaScript

Finney Contest — Voting

Extending TSLint to add Custom Rules

Reacting Everyday

Modular Power-up Systems

Legacy (Windows) OSCP TJ Null List W/O Metasploit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ravgeet Dhillon

Ravgeet Dhillon

Software Engineer at CloudAnswers / Full Stack Developer / Technical Content Writer / React, Vue, Flutter, Laravel, Node, Strapi, Python / Visit ravgeet.in

More from Medium

How to add TypeScript to an existing Next.js project

NextJS Static Render & Performance

Keystone.js custom fields: text with autocomplete

Step-by-step: How to Internationalize your NextJS App with Next-Translate