Prismic & Next.js

Next.js with Prismic is a popular choice for modern business and marketing websites. Next.js handles performance, SEO and the build architecture, and Prismic handles content, so a marketing team can build pages without depending on a software engineer.

What is Prismic?

Prismic is a SaaS headless CMS designed for building and managing interface sections as a page builder made of Slices. Unlike heavy traditional CMSs, it separates the content layer completely from the Next.js presentation layer. It is a full-featured headless CMS, unlike solutions such as TinaCMS that focus mainly on the visual editing experience.

Prismic's dashboard is modern and friendly even to admins with no technical background. Editors check content in a separate preview pane next to the editor (side-by-side preview) before publishing, instead of editing directly on the page.

Prismic's page builder, shown on the Foldables project.

Developer experience: Slice Machine, CLI and webhooks

Technically, Prismic has a mature developer toolset.

• Slice Machine. Lets developers package Next.js interface components as reusable Slices. The marketing team arranges the Slices to build new landing pages without breaking the standard layout.
• Automatic revalidation through webhooks. On every publish, Prismic fires a webhook to Next.js that refreshes the cache almost instantly, with no full rebuild.
• CLI and supporting ecosystem. A command-line tool automates project setup, backed by the documentation and support team of a large SaaS provider.

Limits and cost model

Prismic's free plan includes 1 editor account, 2 languages and 100 GB of bandwidth a month, with no overage allowed. That is enough for most company sites and ordinary marketing campaigns.

When a business needs more editors or more languages, the paid Starter plan (about $10 a month) raises that to 3 editor accounts and 3 languages. Higher plans scale with the editors and locales needed.

Where it fits at Perxel

Perxel finds Next.js with Prismic a good fit for businesses that want a stable headless CMS with an easy admin from day one and don't need more than 2 languages at the start. For projects that need to move quickly, Prismic shortens the time the client's team needs to get used to the system.

The setup has been tested on the Foldables test project, with a live demo at foldables.perxel.com. PageSpeed Insights gives 92 on both mobile and desktop, higher than the comparable project built with TinaCMS.

PageSpeed Insights, mobile.

PageSpeed Insights, desktop.

Read more about the Next.js & Headless CMS website service, or the TinaCMS vs Prismic comparison to choose the right fit.

Footnotes

1. Prismic
2. Prismic: Pricing