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

This content originally appeared on DEV Community and was authored by Ravgeet Dhillon

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 Twitter • LinkedIn • Github or send me an Email.

— Ravgeet, Full Stack Developer and Technical Content Writer

This content originally appeared on DEV Community and was authored by Ravgeet Dhillon

Print Share Comment Cite Upload Translate Updates

APA

Ravgeet Dhillon | Sciencx (2022-01-10T09:02:29+00:00) Handling Previews in a Headless Architecture – Strapi and Next.js. Retrieved from https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/

MLA

" » Handling Previews in a Headless Architecture – Strapi and Next.js." Ravgeet Dhillon | Sciencx - Monday January 10, 2022, https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/

HARVARD

Ravgeet Dhillon | Sciencx Monday January 10, 2022 » Handling Previews in a Headless Architecture – Strapi and Next.js., viewed ,<https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/>

VANCOUVER

Ravgeet Dhillon | Sciencx - » Handling Previews in a Headless Architecture – Strapi and Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/

CHICAGO

" » Handling Previews in a Headless Architecture – Strapi and Next.js." Ravgeet Dhillon | Sciencx - Accessed . https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/

IEEE

" » Handling Previews in a Headless Architecture – Strapi and Next.js." Ravgeet Dhillon | Sciencx [Online]. Available: https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/. [Accessed: ]

rf:citation

» Handling Previews in a Headless Architecture – Strapi and Next.js | Ravgeet Dhillon | Sciencx | https://www.scien.cx/2022/01/10/handling-previews-in-a-headless-architecture-strapi-and-next-js/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.