Our 3 Ingredients for Your Dynamic Headless CMS Website | Next.js, DatoCMS and Vercel

Modern web development — especially for "traditional" content-driven websites — relies on modular and decoupled architectures, "serverless" and Headless CMS solutions to promote agility, scalability and flexibility.

The best way to understand this new approach is to distinguish it from architectures of the past: monolithic CMS systems such as Wordpress, Drupal or Typo3 combine content creation, database, templates, frontend and other features (e.g., through plugins for newsletter integration, contact forms, analytics, etc.) in a single platform. None of these components can be replaced by a new one. After a complex implementation, a website with a monolithic system is trapped in its components. If one of the components fails, the entire system may have to be reimplemented.

Instead, Headless CMS sites rely on a more modern approach where not only the front-end is strictly and completely separated from the backend (i.e., the CMS). Typically, several other services are also connected and can be dynamically exchanged (this is also referred to as "serverless" and the "JAMStack"). The points of contact between the components are deliberately kept small, form and content are strictly separated.

A Headless CMS website has several core components. The essential component is the CMS, which can be used "headless" and is offered as Software as a Service. This means it is controlled through a thin interface and hosted and maintained by a third party (SaaS). It also requires a suitable front-end framework and deployment platform such as Vercel, which allows web applications to be built and deployed without having to worry about managing your own servers or complex cloud configurations. However, these platforms also offer a global content delivery network (CDN) to ensure that applications load quickly for users around the world, as well as many other features to keep us developers happy. And if a move ever becomes necessary, that's no problem either. That wasn't always the case in the monolithic era....

In customer projects over the past few years, we have been able to thoroughly test different combinations in terms of performance developer and user experience. To save our readers blood, sweat and tears, we are happy to share our "aha" moments here (unfortunately without commission): We currently prefer a stack of DatoCMS as Headless CMS, Next.js as React framework and Vercel as deployment platform for many use cases.

The market for Headless CMS systems has grown rapidly over the past few years. Many vendors are similar in their marketing promises and you must look closely to see if a CMS is suitable for your own project. Often only practical experience helps. DatoCMS has proven to be the right answer for us in the last three years:

• Usability: The interface is clean and clear. The UI for editing content is suitable for even the most complex content and makes component-based editing a breeze.

• Content variety & performance: DatoCMS can manage all types of content, whether text, image, video or other files. All this data is delivered geographically close to the user via worldwide content delivery networks to minimize loading times.

• Developer Experience: DatoCMS uses GraphQL for its content API, which allows for precise and fast development using industry standard tools (e.g., graphql-codegen with TypeScript), resulting in less error-prone code. In addition, DatoCMS provides a set of SDKs and APIs to realize more complex applications.

• Philosophy: In 2015 DatoCMS started as an in-house development of an Italian web agency that was dissatisfied with the previous solutions and wanted something new and better for its customers. The Dato Srl is based in Florence (and as an EU company is 100% DSGVO/GDPR compliant!) and therefore not only geographically closer to us than any Silicon Valley startup. ❤️

Few frameworks have made the hearts of web developers beat faster and more often in recent years: Based on React, Next.js combines its advantages for complex, dynamic, and efficient browser applications with the performance benefits of server-side generated static pages. It also provides the ability to map backend functionality to serverless functions.

• Performance: The best of both worlds. Incremental Static Regeneration combines the performance of static pages with the ability to quickly change and instantly render content. This is not only good for users, but also for SEO!

• Developer Experience: If you can master React, you can quickly master Next.js with a flat learning curve. Many of the things you need for most projects are already on board (routing, code splitting, SSR, i18n, and more).

• Open Source & Community: Collaborative, community-supported open source development fosters innovation, inclusivity, and continuous improvement of the framework.

Vercel is a serverless hosting platform and the driving force behind Next.js development. As such, Vercel provides the perfect infrastructure for developing and running Next.js based websites.

In addition to continuous integration and seamless integration with git, Vercel offers a host of other goodies: edge networking, serverless storage solutions, logging, analytics and monitoring, speed insights, and more... all built on AWS’ proven infrastructure.

End of September is Negroni Week, a celebration of one of the world's most iconic cocktails. This Florentine bar classic is made with three simple ingredients: Gin, sweet vermouth and Campari. We, too, develop our best ideas from three ingredients. For custom web apps, we increasingly recommend the stack of DatoCMS as headless CMS, the Next.js framework and Vercel as deployment platform. Compared to classic monolithic systems, it offers a multitude of benefits for users in front of and behind the screens. ❤️