Cloudflare

Deploying a Next.js App on Cloudflare Pages

Important: Cloudflare Pages only supports the Edge Runtime, which does not allow traditional Node.js usage. This project relies on Prisma connected to a serverless PostgreSQL database, which currently needs Node.js and is incompatible with the Edge Runtime. As a result, you must remove code dependent on Node.js—some features will not function (e.g., data sharing/importing).

1. Fork the Repository

  1. Go to the main repo on GitHub.

  2. Click Fork to create a copy of the repository under your own GitHub account.

2. Connect Cloudflare Pages to Your GitHub

  1. From your Cloudflare dashboard, go to Pages and select Create a project.

  2. Click Connect To Git, allowing Cloudflare Pages to access your GitHub repositories.

    • You can grant Cloudflare access to all repos or just selected ones.

  3. Select the forked repository you created in Step 1.

3. Configure Build & Deploy Settings

  1. Once the repo is chosen, select Begin Setup.

  2. Provide the following:

    • Project name (any title you prefer)

    • Production branch (usually main)

    • Framework preset: choose Next.js

  3. Build Command: You need to remove the Node-based route before building the Edge version. Enter:

    rm app/api/cloud/[trpc]/route.ts && npx @cloudflare/next-on-pages@1

    Removing route.ts prevents Node-based server routes from causing build failures on the Edge Runtime.

  4. Keep the Build output directory at its default setting.

  5. Click Save and Deploy.

Note: Deleting route.ts means Node-specific functionality (for example, sharing/importing features) will not work.

4. Monitor the Deployment

Cloudflare will:

  1. Initialize the environment

  2. Clone your repository

  3. Build the Next.js application using the Edge Runtime

  4. Deploy the output to its global network

After the process completes, you’ll see a live preview link.

5. Enable nodejs_compat Flag

Even though we’re removing Node-based routes, you may still need limited Node.js compatibility in some cases:

  1. Open Settings → Functions for your Cloudflare Pages project.

  2. Under Compatibility flags, add nodejs_compat for both Production and Preview.

  3. Re-deploy your site for the changes to take effect.

You should see something like this:

6. (Optional) Configure a Custom Domain

Under Custom domains in your Pages project, you can map your Cloudflare Pages site to your own domain name. You’ll add a CNAME record pointing to <project>.pages.dev.

7. (Optional) Access Policy & Web Analytics

  1. Restrict Access: Configure Access policies to limit who can see your preview or production deployments.

  2. Enable Web Analytics: Cloudflare Pages offers built-in analytics. You can turn them on in the Settings tab.

Congratulations! You’ve successfully deployed (most of) your Next.js app on Cloudflare Pages using the Edge Runtime. Certain Node.js-based features are disabled due to Prisma’s current requirements. Keep an eye on Prisma’s progress toward Edge compatibility, which may allow a full deployment in the future.

PreviousDeploymentNextDatabase