Adapting frameworks for Webflow Cloud
Webflow Cloud supports the Next.js and Astro frameworks, though running either on the Workers runtime may require specific configuration or adjustments. This page offers guidance on framework-specific setup, limitations, and best practices to help you get the most out of your deployment.
Environment configuration
For general deployment and environment configuration, see the configuration guide. This page focuses on requirements and recommendations unique to each supported framework.
Next.js
Webflow Cloud deploys Next.js apps using the OpenNext Cloudflare adapter, an open-source tool that brings Next.js to the edge. It handles translating Next.js’s server-side features to the edge runtime, including routing, API routes, static assets, and server functions, enabling modern Next.js apps to run with minimal changes.
Not all Next.js features are fully supported yet—some, especially those tied to Node.js APIs, may need adaptation. For the latest compatibility details, see the OpenNext documentation.
To run your Next.js app on Webflow Cloud, you may need to adapt some features and provide custom configuration. See the sections below for details.
Images
The Next.js <Image />
component requires a custom loader to work properly on Webflow Cloud. Without this, images may not load for users in production.
Set up a custom image loader:
-
Configure
next.config.js
: -
Create
imageLoader.ts
in your project root:
This routes image requests through Cloudflare’s optimization service, ensuring reliable image delivery for all users.
Limitations
Some Next.js features have limitations when running on Webflow Cloud:
- Middleware: Node.js runtime middleware isn’t supported. Only Edge runtime middleware works on the Workers runtime
- ISR & On-demand revalidation: Incremental Static Regeneration and on-demand revalidation are experimental
- Composable caching: The
use cache
directive isn’t yet supported
See the OpenNext Cloudflare adapter documentation for current feature support.
Additional resources
- Cloudflare Adapter for Next.js
- Next.js Edge Runtime Documentation
- Cloudflare Workers Next.js Guide
- OpenNext x Cloudflare Images
Astro
Webflow Cloud deploys Astro apps using the @astrojs/cloudflare adapter. The adapter supports server-side rendering, API routes, and advanced features like server islands and sessions—translating Astro’s server functionality to the Workers runtime for seamless edge deployment.
Most features work out of the box, but some Node.js APIs and integrations may need additional configuration. For details and advanced usage, see the Astro Cloudflare integration guide. However, we’ve outlined the most common adjustments below.
Loading React components
Be sure to add the client:load
directive to your components to load your components.
Static pages
By default, all Astro routes are server-rendered on the edge. For static routes (such as a custom 404 page or privacy policy), enable pre-rendering to generate and serve them as static assets for faster loading.
API routes
To ensure Astro API routes work on the Workers runtime, access the runtime context through context.locals.runtime
.
Assets
Astro serves all static assets (such as images, stylesheets, and icons) from the public
directory. Be sure to place all static files (images, CSS, fonts, etc.) in the public
directory at your project root.
Image optimization
Astro’s default image optimization service isn’t supported on Webflow Cloud, but you can enable edge image optimization by configuring the Cloudflare image service in your astro.config.mjs
. This lets you serve optimized images globally via Cloudflare’s infrastructure.