#Deploy in cloudflare

5 messages · Page 1 of 1 (latest)

ember tiger May 26, 2025, 12:35 AM

Step by step to deploy Next js app with convex in Cloudflare

chrome ospreyBOT May 26, 2025, 12:35 AM

Hi @ember tiger. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Certainly! Here’s a step-by-step guide to deploying a Next.js app with Convex on Cloudflare Pages, based strictly on the provided knowledge sources:

1. Prerequisites

Cloudflare account
Git repository with your Next.js + Convex project
Node.js and npm installed locally
Basic understanding of Git and CLI tools
Setting Up Cloudflare Pages for Convex Preview Deployments

2. Onboard Your Team (Optional)

Create a Cloudflare account and invite team members as needed.
Assign the Admin role to those managing deployments.
Onboarding Process

3. Add the Build Script

Install the Cloudflare Next.js compatibility package:
```
npm install @cloudflare/next-on-pages
```

In your package.json, add:

"scripts": {
  "pages:build": "npx @cloudflare/next-on-pages"
}

You can test the build locally:
```
npm run pages:build
```

Add the Build Script

4. Create the Worker Configuration

In your project root, create a wrangler.toml file with:

name = "your-project-name"
compatibility_flags = ["nodejs_compat_v2"]
main = ".worker-next/index.mjs"
assets = { directory = ".worker-next/assets", binding = "ASSETS" }

Replace "your-project-name" with your actual project name.
Create the _worker.js Configuration File

5. Connect Your Git Repository to Cloudflare Pages

Log in to Cloudflare, go to Pages, and create a new project.
Select your Git provider and repository.
For the build command, enter:
```
npx @cloudflare/next-on-pages@1
```
For the build output directory, use:
```
.vercel/output/static
```
Add any required environment variables for both Production and Preview environments.
Click Save and Deploy.
Connect Your Git Repository

6. Enable Node.js Compatibility

In your Cloudflare Pages project settings, under Bindings > Compatibility flags, add nodejs_compat_v2 (or nodejs_compat if your compatibility date is September 23rd, 2024 or later).
Enable Node.js Compatibility

7. Deploy and Test

Push your changes to your repository.
Cloudflare Pages will automatically build and deploy your app.
Each branch will get a unique preview URL for testing.

Note:
Unlike Vercel, you do not override the build command with npx convex deploy on Cloudflare Pages. The build process is handled by Cloudflare’s system using the scripts and configuration above.
Build Command Note

For more details and troubleshooting, refer to the full guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@ember tiger Kapa.ai is still learning and improving, please let me know how I did by reacting below.