The Hunt for a Perfect Headless CMS

We recently decided to leave Webflow (the reasons why will be further explained in our next blog) and migrate our company website to a headless content management system. For that reason we decided to thoroughly research the options available and select the best solution for us.

🗒️ Requirements (and wishes ✨)

Our main goal was to select a suitable headless CMS for managing the content of a NextJS-based landing page, allowing for full customization and seamless integration. Based on that we developed a list of requirements for the system we wanted, not just for our website, but also for the majority of other landing pages we develop for our clients.

Must have:

• Localization support (RTL support in editor is a bonus)
• Good integration with NextJS:
• Good React integration.
• Possible server-side (pre)rendering.
• Supports custom sections or components to emulate a purposely primitive website builder.
• Rich text editor support.
• User-friendly admin interface.
• SEO support.
• Multi-user support.
• Media hosting.
• Easy backup and restore.
• Good reputation.

Nice to have:

• Open source.
• Ability to self-host.
• Support for drafts and versioning
• Live preview inside the content editor.
• Admin panel customization options.
• A/B testing support.

Other considerations:

• Migration challenges from the existing website.
• Multi-region hosting and caching (can be done on NextJS side).

Based on those requirements we tested and considered lots of CMS options. Let’s jump straight into why the Payload ended up our first choice.

🥇 The winner - Payload CMS

Reasons for Selection:

• Excellent integration with NextJS. Latest version (3.0) is now a part of a NextJS application.
• Native localization support where localization can be done per field, instead of only per-block.
• Open source and widely used.
• Ability to be self-hosted.
• Admin dashboard is easy to extend with custom React components.
• Easy to extend with custom functionalities since CMS code is co-located with the frontend.
• Native TypeScript support.
• Live editing preview option.

Cons:

• The version 3 that includes all the sweet features we desire is still in beta - this is why we are using it only for our website at the moment and not experimenting on our clients.

🥈 Other CMS systems considered

Below is the list of all the other options we’ve tested. This is not to say that none of those could work for us - Strapi was extremely close too, and others might be best suited for your specific use case.

Strapi

Pros:

• Open source.
• (Probably) the most popular headless CMS option.
• Self-hosted easily.
• Official plugin to generate Swagger documentation so NextJS integration is trivial (although generated schema doesn’t include localization parameters).
• Native localization support
• Customizable admin dashboard.

Cons:

• Locales are still separate, when translating content all fields need to be set in all locales instead of preserving some fields (images, slugs, etc.). This might cause some friction for editors.
• Poor TypeScript support.

WordPress

Pros: Very popular option, familiarity.

Cons: Requires additional plugins and configuration to achieve full headless functionality. Worse NextJS integration and development experience. Forces you to use different technologies on frontend and backend.

Sanity

Pros: NextJS support, UI editor integration, flexible localization methods.

Cons: No self hosting, high price (per user, per request and bandwidth).

Prismic

Pros: NextJS support, live preview editor.

Cons: No self-hosting, clunky localization (all locales are totally separate), restrictive pricing plans (max 8 locales in platinum plan).

Tina.io

Pros: Simple, developer friendly, has live editing capabilities.

Cons: Poor i18n support, needs to be handled by developers.

Directus

Cons: More a dataset editor than a CMS.

Contentful

Cons: Limited language support without enterprise tier.

KeystoneJS

Pros: Seems inactive, development progress on the official website was not updated since 2022.

Contentstack

Cons: CMS is a minor part of the product. Company’s focus is elsewhere.

Storyblok

Cons: Expensive. Subpar developer experience.

🏁 Conclusion

In the end, Payload took the crown for us. What ultimately sold us on it, was its superb integration with Next.js - our technology of choice for web development.

This blog and its underlying research was made by the awesome team at zerodays.dev.