Migrate Next.js Projects from Vercel to Cloudflare with Diverce

Diverce is an open-source migration tool that converts Next.js projects from Vercel to Cloudflare.

This tool focuses on modifying your project structure and configuration files to align with Cloudflare’s deployment requirements for Next.js applications.

It handles tasks like integrating @opennextjs/cloudflare, setting up the wrangler.jsonc file, and adjusting package.json scripts.

This automation can save time and reduce potential errors compared to a manual migration process.

GitHub Repo

Features

🔄 Project Conversion: Automatically converts your project to use @opennextjs/cloudflare for Cloudflare compatibility.

📜 Script Updates: Modifies package.json scripts to facilitate building and deploying your application on Cloudflare.

📄 File Addition: Adds other essential configuration files needed for a smooth deployment on the Cloudflare platform.

⚙️ Configuration Generation: Creates or updates the necessary wrangler.jsonc configuration file required for Cloudflare Pages deployments.

🧹 Cleanup: Removes references to incompatible packages like @cloudflare/next-on-pages and configurations specific to Vercel’s edge runtime.

Installation

1. Clone the Diverce repository from GitHub:

git clone https://github.com/ygwyg/diverce.git
cd diverce

2. Install the necessary dependencies:

npm install

3. Configure your Vercel API token. Copy the example environment file:

cp .env.local.example .env.local

4. And then edit the .env.local file and add your Vercel API token. You can generate a new token from your Vercel account settings under the ‘Tokens’ section.

Usage

1. Start the Diverce development server:

npm run dev

2. Open your web browser and navigate to http://localhost:3000.

3. The dashboard displays your Next.js projects fetched from your Vercel account.

4. Choose the specific project you wish to convert to Cloudflare compatibility.

5. Configure the conversion options according to your needs:

Enable KV Cache: Check this option if you plan to use Cloudflare KV for caching (optional).
Create a new branch: It is recommended to create a new Git branch for the changes (recommended).
Commit and push changes: Automatically commit the changes to the new branch and push them to your repository (optional).

6. After the conversion completes successfully, follow the provided instructions to deploy your modified project to Cloudflare Pages.

Related Resources

@opennextjs/cloudflare: The adapter used by Diverce to make Next.js applications compatible with Cloudflare Pages. GitHub Repository (Note: @opennextjs/cloudflare is part of the OpenNext monorepo)
Cloudflare Pages Documentation: Official documentation for deploying various types of applications, including Next.js, to Cloudflare Pages. Cloudflare Pages Docs
Wrangler CLI: The command-line tool for managing Cloudflare developer products, including Pages deployments. Wrangler Docs
Next.js Documentation: Official documentation for the Next.js framework. Next.js Docs

FAQs

Q: Why would I migrate my Next.js project from Vercel to Cloudflare?
A: Developers migrate for various reasons, including potentially lower costs on Cloudflare, consolidating infrastructure if already using Cloudflare services, or utilizing specific Cloudflare features like Workers, KV, and R2 alongside their Next.js application.

Q: Does Diverce handle differences in edge function runtimes between Vercel and Cloudflare?
A: Diverce primarily focuses on converting the project structure and configuration. It removes Vercel-specific edge runtime configurations. You might need to manually adjust edge function code if it relies heavily on Vercel-specific APIs or runtime behavior not available in Cloudflare Workers.

Q: Is using @opennextjs/cloudflare the standard way to deploy Next.js on Cloudflare Pages?
A: @opennextjs/cloudflare (part of the OpenNext project) is a community-driven solution for deploying full-stack Next.js applications on various serverless platforms, including Cloudflare. Cloudflare Pages also has its own build process, but OpenNext provides compatibility for features that might not be natively supported. Diverce standardizes on using OpenNext.

Q: Do I still need to configure build settings in Cloudflare Pages after using Diverce?
A: Yes. Diverce prepares your codebase and adds the wrangler.jsonc configuration. You still need to set up your project in the Cloudflare Pages dashboard, connect your repository, and configure the build command (usually npm run build) and output directory (typically .open-next/server-function and .open-next/assets when using OpenNext).

Q: Can Diverce migrate Vercel-specific environment variables?
A: Diverce modifies configuration files within your project repository but does not directly interact with or migrate environment variables stored in the Vercel dashboard. You need to manually configure your environment variables within the Cloudflare Pages settings for your project.