Deploy Next.js Supabase to Cloudflare

0. Before you start: update to the paid Cloudflare tier

Deploying to Cloudflare requires a subscription to the Cloudflare Workers paid service due to the size limitations of the free tier. It starts at $5.

1. Run the Turbo command to scaffold the project for Cloudflare

Run the following command to scaffold the project for Cloudflare:

pnpm run turbo gen cloudflare

This command will add some configuration files and install the necessary dependencies for Cloudflare.

2. Use Console logger

Cloudflare doesn't support the pino logger, so you will need to use the console logger:

LOGGER=console

3. Update Stripe Client

The Stripe client is not compatible with Cloudflare by default, so we must add Stripe.createFetchHttpClient() as property to the Stripe SDK:

import 'server-only';
import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';
const STRIPE_API_VERSION = '2025-03-31.basil';
/**
 * @description returns a Stripe instance
 */
export async function createStripeClient() {
  const { default: Stripe } = await import('stripe');
  // Parse the environment variables and validate them
  const stripeServerEnv = StripeServerEnvSchema.parse({
    secretKey: process.env.STRIPE_SECRET_KEY,
    webhooksSecret: process.env.STRIPE_WEBHOOK_SECRET,
  });
  return new Stripe(stripeServerEnv.secretKey, {
    apiVersion: STRIPE_API_VERSION,
    httpClient: Stripe.createFetchHttpClient()
  });
}

4. Using the Resend Mailer or create a custom mailer

Since the default library nodemailer relies on Node.js, we cannot use it in the Edge runtime. Instead, we will use the Resend Mailer.

MAILER_PROVIDER=resend

And provide the Resend API key:

RESEND_API_KEY=your-api-key

Alternatively, implement your own mailer using the abstract class we provide in the packages/mailers package.

This is very simple, but you need to ensure that the mailer is compatible with the Cloudflare runtime.

5. Switching CMS

By default, Makerkit uses Keystatic as a CMS. Keystatic's local mode (which relies on the file system) is not supported in Cloudflare's runtime.

Therefore, you will need to switch to another CMS or use Keystatic's Github mode - which uses Github as data provider.

At this time, the other CMS supported is WordPress. If you want to use WordPress, set CMS_CLIENT to wordpress in the apps/web/.env file:

CMS_CLIENT=wordpress

Alternatively, use the Keystatic remote mode through Github.

Please check the CMS documentation for more information.

6. Environment variables

Create a new file named .env.production.local in the apps/web directory and make sure to add the required environment variables.

You can use the Dev Tools to generate the environment variables that you can then paste into the .env.production.local file.

7. Deploy the application

At this time, you can deploy the application using the following command:

pnpm --filter web run deploy

At the time of writing, the Cloudflare Dashboard does not support deploying the application since OpenNext is not supported yet in Cloudflare.

8. Other useful commands

You can also use the following commands to deploy the application:

pnpm --filter web run preview

This command will preview the application in a Cloudflare-like environment before deploying it. It is highly recommended to run this command before deploying the application to understand if there are any issues.

pnpm --filter web run cf-typegen

This command will generate the TypeScript types for the Cloudflare environment.