For Nextjs projects, Cloudflare Pages currently support only static deployment, with dynamic behavior handled via Pages Functions.

Other Server-side features like getStaticProps will not work as they do when running the development server, but Pages Functions can help you enable SSR features like API Routes to enable dynamic behavior using serverless functions. See below for more information on keeping form functionality when deploying to Cloudflare Pages.

Stackbit automatically deploys your site using the default deployment and hosting methods. You can still deploy your code to your own Cloudflare Pages account. Learn more about Stackbit's deployment options.

Transfer GitHub Repo

Before getting started, you'll want to transfer the code to your GitHub account.

Sign into Cloudflare Pages

To begin, go to the Cloudflare Pages site and sign in with your Cloudflare account. If you do not have an account yet, you can sign up as you get started deploying your new Pages site.

Connect to Your Git Provider

After logging into your Cloudflare account, in Account Home > go to Pages > Create a project. You will be prompted to sign in with your preferred git provider, which allows Cloudflare Pages to deploy your projects, and update your PRs with preview deployments. Sign in with your GitHub account.

Create Cloudflare Pages Project

Select Project from GitHub

Select the GitHub repo that you transferred to your account.

Select GitHub repository

Configure Your Deployment

Once you have selected a repository, select Install & Authorize then Begin setup. You can then customize your deployment in the Set up builds and deployments page.

Your project name will be used to generate your project's hostname. By default, this matches your GitHub repo name.

The production branch indicates the branch that Cloudflare Pages should use to deploy the production version of your site. For most projects, this is the main or master branch. All other branches that are not your production branch will be used for preview deployments.

In Build settings, choose Next.js (Static HTML Export) as the framework preset.

Choose framework preset

Now you're ready to deploy! Click on Save and Deploy, then wait for the project to deploy and your Stackbit site will be live! 🎉

Learn more about managing your site on Cloudflare Pages.

Using Stackbit's Forms

If you are using Stackbit's forms, there's a bit more work to get them functioning in your Cloudflare Pages deployment.

  1. Move .netlify/functions/submission_created.js to functions/api/submission-created.js. You can also check out this migration doc for (moving from a site from Netlify to Cloudflare Pages)[https://developers.cloudflare.com/pages/migrations/migrating-from-netlify/].
  2. Follow this guide to obtain and configure the appropriate environment variables.
  3. (Optional) Update references in code and content from /.netlify/functions/submission_created to functions/api/submission-created.

See this Cloudflare guide for help on working with forms on your Cloudflare Pages project.