Deploy Next.js Supabase to Cloudflare
This guide will help you deploy the Next.js SaaS boilerplate to Cloudflare Pages using the Edge runtime.
To deploy the application to Cloudflare, you need to do the following:
- Install and configure OpenNext.js
- Using an HTTP-based Mailer (such as Resend)
- Switching to an HTTP-based CMS (such as Keystatic in GitHub mode)
- Setting Node.js Compatibility Flags
- Environment variables
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.
0. Limitations
Before you continue, please evaluate the limitations of the Edge runtime. The Edge runtime does not support all Node.js features, so you may need to adjust your application accordingly.
Cloudflare is cheaper and faster than many other providers, but running your application on Cloudflare Pages means not having access to the vast Node.js ecosystem.
Makerkit uses Cloudflare as a baseline, so you can deploy it to Cloudflare Pages without any issues. However, you will need to keep in mind the limitations of the Workers/Edge runtime when adding new features.
One more thing to consider is that the Edge runtime does run close to your users, but may run far from your database. Consider read replicas or other strategies to reduce latency in all situations.
If your mind is set on using Cloudflare, please follow the instructions below.
1. Install and configure OpenNext.js
Install OpenNext.js and Cloudflare's packages:
pnpm --filter web add @opennextjs/cloudflare wrangler
2. Add the OpenNext.js Cloudflare adapter
Add the OpenNext.js Cloudflare adapter to your open-next.config.ts
file:
import { defineCloudflareConfig } from "@opennextjs/cloudflare";export default defineCloudflareConfig({});
Also add a Wrangler configuration file to your apps/web
directory:
{ "$schema": "node_modules/wrangler/config-schema.json", "name": "your-app-name", "main": ".open-next/worker.js", "compatibility_date": "2024-12-30", "compatibility_flags": [ "nodejs_compat" ], "minify": true, "assets": { "binding": "ASSETS", "directory": ".open-next/assets" }, "observability": { "enabled": true }, "placement": { "mode": "smart" }, "vars": {}, "d1_databases": [], "kv_namespaces": [], "r2_buckets": []}
3. Use Console logger
Cloudflare doesn't support the pino
logger, so you will need to use the console
logger. To do this, add the following code to your apps/web/lib/logger.ts
file:
const Logger = { info: console.info, error: console.error, warn: console.warn, debug: console.debug, fatal: console.error,}export { Logger };
And now implement the new logger:
import { createRegistry } from '../registry';import { Logger as LoggerInstance } from './logger';// Define the type for the logger provider. Currently supporting 'pino'.type LoggerProvider = 'pino' | 'console';const LOGGER = (process.env.LOGGER ?? 'console') as LoggerProvider;// Create a registry for logger implementationsconst loggerRegistry = createRegistry<LoggerInstance, LoggerProvider>();// Register the 'pino' logger implementationloggerRegistry.register('pino', async () => { const { Logger: PinoLogger } = await import('./impl/pino'); return PinoLogger;});// Register the 'pino' logger implementationloggerRegistry.register('console', async () => { const { Logger: ConsoleLogger } = await import('./impl/console'); return ConsoleLogger;});/** * @name getLogger * @description Retrieves the logger implementation based on the LOGGER environment variable using the registry API. */export async function getLogger() { return loggerRegistry.get(LOGGER);}
Alternatively, implement any other Cloudlfare-compatible logger.
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 Resend Mailer.
Set up SPF and DKIM records in your DNS settings.
Please follow the Vercel Email documentation to set up the SPF and DKIM records.
Alternatively, you can use the Resend Mailer. Set the MAILER_PROVIDER
environment variable to resend
in the apps/web/.env
file:
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 Edge runtime. As usual, HTTP-based APIs are preferable.
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 the Edge 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. 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. Select "apps/web" as path to build
When prompted to select the path to build, select apps/web
as the path to build - since our Next.js app is located in the apps/web
directory.
If you have multiple apps, you can select the app you want to deploy.
7. Setting Node.js Compatibility Flags
Cloudflare requires you to set the Node.js compatibility flags. Please follow the instructions on the Cloudflare documentation.