Hi everyone,
We’ve been building CloudPack — a high-performance, content-driven project engine for marketing sites, designed from the ground up for CloudCannon and static exports. After using it internally as our “project engine” to cut down on boilerplate, we’re excited to share it with the community.
The Idea
Let’s be honest, none of us start a new project from a completely blank slate. We usually copy-paste the “good parts” from our last build and spend the first two days tweaking it to fit the new requirements.
CloudPack is the distillation of years spent building multilingual marketing sites with Next.js and CloudCannon. Instead of carrying over “messy” snippets from project to project, we’ve gathered our best practices and architectural wins into a cohesive, battle-tested project engine.
This static-first Next.js 15 app uses output: ‘export’ to integrate seamlessly with CloudCannon’s pipeline while remaining ultra-fast and CDN-friendly. It’s a production-ready foundation designed to replace the “copy-paste-tweak” cycle—giving editors a full visual experience and developers a modern stack without the usual integration headaches.
How it Works: Section-Based Design
Pages are built from sections on a 12-column grid. Each section can host multiple editable components and has its own style settings (backgrounds, spacing, appearance, and sticky behavior). Components within those sections are highly configurable, allowing editors to create distinct layouts without writing code.
In practice, any page can be a landing page. It’s the model many of us already use: Page = Sections → Sections = Styled Blocks → Blocks = Configurable Pieces.
Solving the “Configure Everything Twice” Problem
Unlike Jekyll or Astro, Next.js doesn’t have a native content pipeline, which often leads to duplicating work for the CMS and the app. CloudPack eliminates these repetitive steps:
-
Single Schema: A single page schema (schemas/page.md) drives both the CloudCannon editor and the app. Change it in one place, and both stay in sync via @cloudcannon/filer.
-
Automated Component Map: No more hand-maintaining a React registry. A prebuild script scans your folders and Bookshop blueprints to automatically generate the component map.
-
Unified Rich-Text Pipeline: We use a single markdown-it pipeline. What the editor sees in CloudCannon is exactly what renders in the app—no separate MDX compilation or duplicate configs required.
What’s in the Box:
-
30+ Editable Components: Full library including heroes, sections, FAQs, rich content, horizontal scroll, sticky image, media gallery, dynamic background, timeline, and more.
-
Performance-First: Core Web Vitals focused, featuring code splitting, image optimization (including custom WebP/AVIF handling), font optimization, and optional PWA support.
-
Dynamic & Responsive Theming: Colors, typography, and spacing are driven from data/site-settings/main.json. Includes a set of integrated palettes (Green, Blue, Purple, Orange, Pink, Red) with light/dark variants and system-theme detection.
-
Mobile-First Design: Built on Tailwind CSS with configurable breakpoints and fluid type scaling for consistency across all screens.
-
Global Configuration: Project-wide settings to tweak look and feel, company details, and manage custom scripts, verifications, and GTM settings in one place.
-
i18n & SEO: Multi-language support, next-seo, structured data, and sitemap generation. Page-level SEO metatags are generated at build time as static HTML to improve the page-sharing experience.
-
Smooth UX: Framer Motion, Lenis smooth scroll, typography animations, and browser-native API page transitions.
-
Firebase User Authorization: Built-in Google OAuth, credentials, password reset, and user management to gate content or offer member areas.
-
Content by User State: Sections and pages can be shown or hidden based on login state (e.g., require_registration), allowing for personalized content without a separate app.
Live Demo: https://www.cloud-pack.com/
Docs: Comprehensive user guides for editors and technical docs for developers are included in the repo.
Closing Thoughts
What started as a way to escape our own “copy-paste debt” has evolved into a robust backbone for almost any web application. Solving the boring integration work has freed us to take on more ambitious projects—the kind we once avoided while stuck in a “tweak and fix” cycle.
We’re grateful to the CloudCannon team for the infrastructure that makes this possible. If you’re building content-heavy sites with Next.js, we’d love to hear your thoughts on this setup or what features would make a starter like this more useful for your workflow.
Cheers,
Yuri Methodgate
Thanks for sharing!
