Arindam Majumder

Posted on Nov 26

How to Deploy Your Next.js App to Cloudflare

#nextjs #webdev #javascript #beginners

Introduction

Most of the Developers, including me, deploy their Next.js application to Vercel—it’s quick, easy, and seamless.

But one day, I started thinking “Could there be a better or simpler way to deploy my app?”

After exploring a bit I came across Cloudflare Pages, and I was impressed by how straightforward it is to deploy your Next.js app there.

Cloudflare Pages is a great alternative to Vercel and Netlify because it offers unlimited bandwidth for free, while others put limits on how much we can use. Plus, there’s no catch on the free plan—it allows commercial use, unlike Vercel’s restrictions.

In this article, we’ll explore how to deploy your Next.js app to Cloudflare Pages.

Prerequisites

Before we start, make sure that you have the following:

A Cloudflare account. You can sign up at Cloudflare.
A GitHub, GitLab, or Bitbucket account with a repository containing our Next.js code.
Node.js installed on your local machine.

Basic Project Setup

Firstly, Let’s start by creating a Simple Next.js Application. For the simplicity of this article, I’ve already created a demo project.

You can clone the code from GitHub using the following command:

git clone -b starter https://github.com/Arindam200/next-on-cloudflare.git

After cloning the repository, let’s go to the project directory:

cd next-on-cloudflare

Next, we’ll install the dependencies:

npm install

To work with Cloudflare, the first thing we need to make sure is that all the pages are configured to run on the Edge runtime. For that we’ll to add the following line on every page.

export const runtime = "edge";

This configuration will make sure that our pages run on the edge runtime.

Now, we’ll need a package to build our application. Let’s install it by running the following command:

npm install --save-dev @cloudflare/next-on-pages

Once the downloading process is done, we’ll update the package.json to include the following scripts

"pages:build": "npx @cloudflare/next-on-pages",
"preview": "npm run pages:build && wrangler pages dev",
"deploy": "npm run pages:build && wrangler pages deploy"

Here’s how your package.json will look after the update.

Next, we’ll create a wrangler.toml file in the root directory of our application with the following content:

//wrangler.toml
name = "next-on-cloudflare"
compatibility_date = "2024-07-29"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

Finally, we’ll update the next.config.mjs with the following

//next.config.mjs
import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

/** @type {import('next').NextConfig} */
const nextConfig = {};

 if (process.env.NODE_ENV === 'development') {
   await setupDevPlatform();
 }

export default nextConfig;

And with that, our basic project setup is done!

If we run the project and go to localhost:3000 and we’ll get the following UI

Deployment

Now that our project is ready, it’s time to deploy it to Cloudflare Pages.

Log in to the Cloudflare dashboard and select your account.
In Account Home, select Workers & Pages.
Select Create application > Pages > Connect to Git.

Here we have to connect to Git to import a repository. Alternatively, You can directly upload the codebase as well.

After connecting to Github, Select the repo that you want to deploy. For this tutorial, we’ll deploy the repo that we cloned i.e. next-on-cloudflare.

Once the repository is connected, We’ll configure our build settings. Cloudflare Pages will automatically detect the settings for most Next.js projects, but make sure to set the following for the build:

Framework: Select Next.js.
Build Command: Use npx @cloudflare/next-on-pages@1 or whatever you set up in your package.json.
Output Directory: Set this to .vercel/output/static (or the appropriate directory for your project).

Finally, Let’s deploy our site. click Deploy to start the deployment process. Cloudflare will automatically build and deploy our app.

Now, let’s go to https://next-on-cloudflare-arindam.pages.dev/ and we can see our Next.js app up and running on Cloudflare Pages.

It’s as simple as that!

Conclusion

In this article, we have created and deployed our Next.js application to Cloudflare. With this foundation, you can now build and deploy even more complex applications with ease.

If you found this blog post helpful, please consider sharing it with others who might benefit. Also, Follow me For More Content like this: