Get started with 33% off your first certification using code: 33OFFNEW

How to Deploy a Next.js App to Cloudflare Pages

2 min read
Published on 10th October 2023

Cloudflare Pages is a jamstack platform for frontend developers to collaborate and deploy websites. Below is a step-by-step guide on how to deploy a Next.js application to Cloudflare Pages. This tutorial assumes that you already have a Next.js app ready for deployment.

Prerequisites:

  • A Next.js application.
  • A GitHub account.
  • A Cloudflare account.

Steps to Deploy Next.js App to Cloudflare Pages:

1. Push Your Next.js App to GitHub:

First, make sure your Next.js application is pushed to a repository on your GitHub account.

# Initialize a git repository (if not already done)
git init

# Add all files to the staging area
git add .

# Commit the files
git commit -m "First commit"

# Add your GitHub repository as a remote
git remote add origin YOUR_GITHUB_REPOSITORY_URL

# Push the files to GitHub
git push -u origin master

2. Create a New Project on Cloudflare Pages:

  • Log in to your Cloudflare account.
  • Navigate to the Cloudflare Pages dashboard.
  • Click on the 'Create a project' button.
  • Connect your GitHub account (if not already connected).

3. Select Your GitHub Repository:

Select the GitHub repository where your Next.js app is located. Grant the necessary permissions for Cloudflare to access your repo.

4. Configure Your Project:

  • Provide a project name.
  • Cloudflare will automatically detect that it's a Next.js app and will pre-fill the build settings, but ensure the following:
    • Build command: yarn build or npm run build
    • Build output directory: out
  • Click on the 'Save and Deploy' button.

5. Deployment:

Cloudflare Pages will now begin the deployment process. It will install the necessary dependencies, build your project, and deploy it to a global network.

6. Custom Domain:

After deployment, you will receive a default subdomain project-name.pages.dev. If you want to use a custom domain:

  • Go to your project settings on Cloudflare Pages.
  • Navigate to the 'Custom domains' section.
  • Add your custom domain and follow the instructions to configure your domain's DNS settings.

Conclusion:

Deploying a Next.js app to Cloudflare Pages is a straightforward process that takes advantage of the power and simplicity of Cloudflare's infrastructure. This seamless integration allows developers to focus more on building their Next.js applications while ensuring a reliable and fast deployment pipeline with Cloudflare Pages.