I’ve been using CloudCannon for 10+ years. Ever since the public beta days when I probably shouldn’t have been using it in production (but did anyway). Over the last five years I’ve moved away from Jekyll and mostly use Next.js now, but I’ve kept CloudCannon in the mix whenever I can.
After the latest editable regions update, I wanted to port my React data-binding solution over to the new visual editing. And I thought, why not share it as a starter?
Here’s the thing: Next.js doesn’t have built-in content handling like Jekyll, Astro, or Hugo. You need to bring your own.
But that usually means configuring everything twice—once for CloudCannon and again for your content pipeline. Change a schema? Update it in two places. Add a markdown field? Configure MDX compilation manually. Quite the hassle, but we can solve this right…
The starter uses Content Collections with Next.js App Router to give you a solid base for creating pages and blog posts from within CloudCannon. I’ve build a scaffolding script that reads your CloudCannon config and schemas, then generates your content setup and TypeScript types. It detects markdown fields and sets up MDX compilation for you—so editors write simple markdown or frontmatter in Cloudcannon while developers get React components. No double configuration.
The starter fully supports CloudCannon’s new editable regions with a block-based page builder. It includes some example blocks—all set up with visual editing controls. Add a new block, register it in one file, add your editables and you’re done.
After the latest updates Cloudcannon builds with Next.js are really fast. Way faster than Vercel actually. So yeah, long story short. I love Next.js and I love Cloudcannon. And I hope you will too with this starter.
Anyway, here is the link to the repo. It is definitely not polished yet, but I hope people can see that Cloudcannon and Next.js work great together!
