How to Deploy a Next.js App for Free

Why Deploy a Next.js App for Free?

Next.js is an excellent framework—it's fast, flexible, and ideal for building modern web applications. While hosting can be expensive, there are powerful free alternatives available. In this guide, I'll walk you through deploying your Next.js app for free using Cloudflare Pages, a platform I use for my own site. It offers unlimited bandwidth, a global CDN, and straightforward setup. Let's deploy your application without any cost!

What You'll Need

Before we begin, ensure you have:

• A Next.js application
• A GitHub account (free)
• A Cloudflare account (free)
• Basic knowledge of Git and terminal commands
• Node.js installed (version 18.17 or later recommended)
• npm (included with Node.js)

If you haven't created a Next.js application yet, you can create one with:

npx create-next-app@latest my-next-app
# Answer the prompts - the defaults work well for this tutorial
cd my-next-app
npm install    # Install dependencies
npm run dev

Your starter application will be running at http://localhost:3000. Now, let's prepare it for deployment.

Configure Your Next.js App

Before pushing to GitHub, we need to configure Next.js for static export. Create or update your next.config.js file in your project root:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

This configuration tells Next.js to generate a static export, which is required for Cloudflare Pages. Without this configuration, your deployment will fail.

Step 1: Push Your App to GitHub

Cloudflare Pages integrates seamlessly with GitHub, so we'll need your code in a repository. For those new to Git, here are the essential commands:

git init
git add .
git commit -m "Initial commit - ready to deploy!"

Create a new repository on GitHub (either public or private), then push your code:

git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Your application is now on GitHub, ready for Cloudflare deployment.

Step 2: Set Up Cloudflare Pages

Navigate to Cloudflare's dashboard and sign in or create an account.

1. Create a Project: Navigate to "Workers & Pages" > "Create application" > "Pages" tab > "Connect to Git."
2. Link GitHub: Authorize Cloudflare to access your GitHub account, then select your Next.js repository.
3. Configure Build Settings: Cloudflare will detect your Next.js application. Configure these settings:
   • Framework Preset: Next.js
   • Build Command: npm run build
   • Build Output Directory: out
   • Environment Variables: None required for basic setup
   • Node.js version: 18 (or your project's version)
   • Keep other settings at their defaults
4. Deploy: Select "Save and Deploy." The build process will take a few minutes.

Your application will be accessible at your-project.pages.dev once deployment completes.

Step 3: Test It Out

Visit your new URL to see your Next.js application in action. Thanks to Cloudflare's CDN, it's fast globally, and the free tier includes unlimited requests without hidden costs.

As a bonus, Cloudflare automatically deploys updates when you push to your repository. Let's test this with a simple counter component. Replace the contents of your app/page.tsx (or app/page.js if not using TypeScript):

'use client';

import { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Welcome to My Free Next.js App!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

Important notes about this code:

• The 'use client' directive is required for React hooks (useState) in Next.js 13+
• This file goes in your main page file (app/page.tsx or app/page.js)
• This counter updates on button clicks
• The code works with static export since it's client-side

Commit and push your changes:

git add .
git commit -m "Add interactive counter component"
git push

Watch as your changes automatically deploy.

Why Cloudflare Pages Is Excellent

I host my site on Cloudflare Pages for several compelling reasons:

• Free Forever: Unlimited bandwidth and requests—ideal for side projects or startups
• Edge Performance: Leverages Cloudflare's global network for exceptional speed
• Simple Setup: Minimal configuration required—just connect and deploy

Important consideration: Cloudflare Pages works optimally with static sites. If your Next.js application relies heavily on server-side rendering (SSR) or dynamic features (extensive API calls or filesystem operations), additional configuration may be necessary—or it might not be suitable. For static or client-side applications, it's an excellent choice.

Conclusion

Deploying a Next.js application for free is straightforward with Cloudflare Pages. After connecting your GitHub repository to Cloudflare and adjusting a few settings, your site is live—at no cost. This solution is perfect whether you're showcasing a portfolio or launching a new tool.

Troubleshooting Tips

• Review build logs in Cloudflare Pages if deployment fails
• Verify your next.config.js includes the output: 'export' setting
• Ensure Node.js version compatibility (18.17 or later recommended)
• Confirm all dependencies are listed in your package.json

Additional Features: Consider adding a custom domain through Cloudflare for a professional touch—it's also included in the free tier.