Deploying Your Next.js App on Cloudflare Pages

Cloudflare Pages is a powerful platform that makes it incredibly easy to deploy your Next.js applications. With its tight integration with Git repositories, built-in global content delivery network (CDN), and advanced features, Cloudflare Pages is an excellent choice for hosting your Next.js projects.
In this article, we'll walk through the steps to deploy your Next.js app on Cloudflare Pages, ensuring a smooth and seamless deployment process.

Step 1: Create a Cloudflare Account
If you haven't already, create a Cloudflare account by visiting https://dash.cloudflare.com/sign-up. Follow the prompts to set up your account.

Step 2: Initialize a Git Repository
Cloudflare Pages works by connecting to your Git repository. If you haven't already, initialize a Git repository for your Next.js app. You can use popular platforms like GitHub, GitLab, or Cloudflare's own Git service.

git init
git add .
git commit -m "Initial commit"

Step 3: Create a New Project on Cloudflare Pages

• In the Cloudflare dashboard, navigate to the "Pages" section.
• Click on the "Create a Project" button.
• You'll be prompted to connect your Git repository. Choose the provider (e.g., GitHub, GitLab) and select the repository containing your Next.js app.

Step 4: Configure Build Settings
Cloudflare Pages will automatically detect that you're deploying a Next.js app and set the appropriate build settings. However, you can customize these settings if needed.

-In the "Configuration" section, review the build settings.
-If necessary, adjust the build command and build output directory to match your Next.js app's configuration.

Step 5: Set Environment Variables (optional)
If your Next.js app requires environment variables, you can set them in the "Environment Variables" section.

-Click on "Environment Variables".
-Add your environment variables by specifying the variable name and value.

Optional if you facing this error while deployment

then add YARN_VERSION in Environment variables and match it with your current version

Step 6: Deploy your App
After configuring the settings, click the "Save and Deploy" button to start the build and deployment process.

Step 7: Wait for Deployment
Cloudflare Pages will now build and deploy your Next.js app. You can monitor the deployment progress in the dashboard.

Step 8: You need to make a few more changes after deployment is complete if you see this screen

Then go to setting -> functions and add nodejs_compact to the compatibility section

Do the same for this and

Redeploy the app again

Step 9: Access your Deployed App
Once the deployment is complete, you'll find the URL of your deployed Next.js app in the "Deployment Details" section.

Additional Notes
-Cloudflare Pages automatically builds and deploys your app whenever you push changes to your connected Git repository.
-It supports preview deployments, allowing you to preview changes before deploying to production.
-Cloudflare Pages provides a global content delivery network (CDN) for your Next.js app, ensuring fast load times worldwide.
-You can configure custom domains, SSL certificates, and other advanced settings in the Cloudflare dashboard.

Cloudflare Pages is a powerful and convenient platform for deploying your Next.js applications. With its streamlined deployment process, built-in CDN, and advanced features, you can rest assured that your Next.js app will be available to your users with exceptional performance and reliability.