Foldables

Foldables is a test project researched and built by Perxel to try the full Next.js, Prismic and Cloudflare Workers stack, from content modelling through the CLI to deployment on edge infrastructure.

Technical overview

• Deployment: Cloudflare Workers (edge network) through the OpenNext Cloudflare adapter, with no Vercel or Cloudflare Pages
• Structure: 1 page type (Page) and 1 singleton (Home), demoed with 1 slice (Hero)
• Content updates: automatic revalidation through a webhook when content is published in Prismic
• Preview: full-website preview and Slice Simulator built into the Prismic page builder

Context and goals

This is a common type of project for marketing teams: a fast, SEO-ready website with a professional editor for a non-technical team, deployed on an edge network instead of relying on the Vercel default.

The Foldables starter aims at three things at once:

Content management with Prismic

Foldables integrates Prismic as a SaaS, managing content types and slices through the CLI instead of by hand.

Editing content in the page builder, previewing each slice before publishing.

• Content modelling through the CLI. Page types and slices are created and synced with npx prismic type create and npx prismic slice create, keeping the model consistent between the code and the dashboard.
• Publishing in the page builder. Real content is created and published in the Prismic dashboard, kept separate from defining the structure.
• Instant revalidation. A webhook listens for Prismic's publish event and triggers revalidation, so static pages update right away without rebuilding the whole site.

Deployment on Cloudflare Workers

Vercel is the default and the most natural fit for Next.js. For Foldables, Perxel reused the OpenNext approach to run the app on Cloudflare Workers, already proven on Atlas Robotics.

• Low running cost. Cloudflare has a generous free plan, with almost no infrastructure cost at a marketing website's traffic.
• A global edge network. Responses come from the server closest to the visitor, keeping response times short wherever they are.
• Custom domain and its own cache. Domain and R2 cache settings are managed through Wrangler, separate from the dev environment.

What it means for client projects

Foldables is a proven starter for the Next.js and Prismic stack. When a client chooses Prismic, Perxel doesn't spend time setting up content modelling or deployment again. All the effort goes into a bespoke interface and the experience for each company.

See also the Next.js & Headless CMS website service. The live demo is at foldables.perxel.com.