Optimizing your app 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.
General recommendations
Serving assets from your Webflow site
To ensure your app is optimized for bandwidth, make sure to serve assets (like images, videos, and files) directly from your app, rather than proxying assets from your site. This helps reduce unnecessary data transfer and ensures your assets are delivered quickly and reliably.
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.
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
For images, it’s recommend to use the <img>
tag instead of the <Image />
component. Using Next.js <Image />
component may serve the asset from a different origin, which may cause issues with caching and performance.
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.
Environment variables
Astro provides several ways to access environment variables, depending on where your code runs:
- Use
import.meta.env
for built-in variables likeBASE_URL
andASSETS_PREFIX
, and for any custom variables prefixed withPUBLIC_
. Using thePUBLIC
prefix will make the variable available on both the server and the client. - Use
Astro.locals.runtime.env
in Astro server-side components to access custom environment variables. - Use
locals.runtime.env
in API routes to access custom environment variables.
To use locals.runtime.env
variables during local development, create a dev.vars
file in your project root. Use the same format as a standard .env
file to define your environment variables.
API routes
To ensure Astro API routes work on the Workers runtime, add the following line to the top of your route:
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.
Tailwind CSS
To use Tailwind CSS in your Astro project, use the @tailwindcss/vite
plugin to ensure compatibility. Once you’ve created your Astro project from the CLI, follow the instructions in the Tailwind CSS integration for Astro guide to set up Tailwind CSS.
@astrojs/tailwind is not supported on Webflow Cloud
@astrojs/tailwind
is deprecated and not supported on Webflow Cloud.
Third-party templates and guides may still reference it, but it’s not recommended to use it. Instead, upgrade to the latest version of Tailwind CSS and use the @tailwindcss/vite
plugin to ensure compatibility.