The Best Ways to Deploy React/Next.js Apps for Free

Deploying web applications has become easier than ever, especially for developers working with frameworks like React and Next.js. With various platforms offering free-tier services, you can easily host your projects without incurring any costs. In this blog, we’ll explore two of the most popular platforms for deploying React and Next.js apps for free: Netlify and Vercel.

Both platforms offer seamless integration with Git repositories, automated deployments, and excellent support for modern web frameworks, making them the go-to choices for developers. Let’s dive into the details of how to deploy your apps on each platform.

1. Deploying React and Next.js Apps on Vercel

Vercel, the creator of Next.js, is a top choice for deploying Next.js apps, but it’s also great for React and other front-end frameworks. Vercel’s free tier is ideal for hobbyists and small projects, providing fast deployment, built-in CI/CD, and seamless support for serverless functions. One major benefit is its zero-configuration deployment for Next.js apps, including SSR, SSG, and API routes.

Steps to Deploy React/Next.js on Vercel

Step 1: Set Up Your React or Next.js Project

Just like with Netlify, ensure your project is ready for production with:

npm run build

For Next.js, you can simply use:

next build

Vercel automatically handles the rest.

Step 2: Push Your Code to GitHub

Ensure your project is on GitHub (or GitLab/Bitbucket). If not, push it as explained in the Netlify section.

Step 3: Connect Vercel to Your GitHub Repository

1. Go to Vercel and sign up (use your GitHub account for seamless integration).
2. On the Vercel dashboard, click "New Project".
3. Choose the GitHub option (or GitLab/Bitbucket), authorize Vercel, and import your repository.
4. Vercel will automatically detect if it’s a React or Next.js app and apply the appropriate build settings.

Step 4: Configure Project Settings

Once the repo is connected, you can adjust some settings if needed, though Vercel’s defaults are usually enough:

• Build Command: Vercel will auto-detect npm run build for React and next build for Next.js.
• Output Directory: Vercel will automatically detect this (usually build for React or .next for Next.js).

Step 5: Deploy Your App

Click "Deploy", and Vercel will take care of the rest! Within a few minutes, your app will be live, and Vercel will give you a production URL where your app is hosted.

Features of Vercel's Free Tier

• Next.js Optimization: Vercel provides the best deployment experience for Next.js, with support for SSR, SSG, and ISR (Incremental Static Regeneration).
• Automated CI/CD: Vercel rebuilds and redeploys your app automatically on every push to your Git repository.
• Custom Domains: Add custom domains with automatic HTTPS, just like Netlify.
• Serverless Functions: Built-in support for API routes and serverless functions.

I have used Vercel for more than 50 pet projects. I am that guy who deploys everything I build.

1. Deploying React and Next.js Apps on Netlify

Netlify is a powerful platform that offers a free tier perfect for hobby projects, small websites, or personal portfolios. It provides automated builds, continuous deployment, serverless functions, and an easy-to-use CDN for fast performance. Netlify is especially popular for static site generation (SSG) and Jamstack applications.

Steps to Deploy React/Next.js on Netlify

Step 1: Set Up Your React or Next.js Project

Before deploying, ensure your project is ready for production. For React:

npm run build

For Next.js (if using static generation):

next build
next export

This will generate the necessary production-ready files in the build or out folder.

Step 2: Push Your Code to GitHub

Netlify works best with Git repositories (like GitHub, GitLab, or Bitbucket). If you haven't already, push your React/Next.js project to a GitHub repository:

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repo-url>
git push -u origin main

Step 3: Connect Netlify to Your GitHub Repository

1. Go to Netlify and sign up (you can use GitHub for easier access).
2. Once logged in, click on "New site from Git" on your Netlify dashboard.
3. Choose GitHub (or another Git provider), and authorize Netlify to access your repositories.
4. Select the repository where your React or Next.js app is located.

Step 4: Configure Build Settings

After selecting your repo, Netlify will prompt you to configure the build settings. For a typical React or Next.js app, the default settings should work:

• Build command: npm run build (or next build for Next.js)
• Publish directory: build (for React) or out (for static Next.js apps)

For server-side rendered (SSR) Next.js apps, Netlify also supports serverless functions, but it may require additional configuration.

Step 5: Deploy Your App

Click "Deploy Site". Netlify will build your app and deploy it automatically. After the build completes, you’ll get a live URL where your app is hosted. That’s it—you’ve successfully deployed your React/Next.js app!

Features of Netlify's Free Tier

• Automated Deployments: Every time you push changes to your Git repo, Netlify rebuilds and redeploys your app.
• Custom Domains: You can add custom domains for free, with automatic HTTPS via Let's Encrypt.
• Serverless Functions: Easily extend your app’s functionality using serverless functions.
• Generous Free Tier: Offers up to 100GB of bandwidth and 300 build minutes per month.

This is also a free site that provides a lot of bandwidth for deploying pet projects. I have deployed a lot of projects here as well.

By following the steps outlined in this guide, you can easily deploy your React or Next.js applications without spending a dime, enabling you to focus on building great products rather than worrying about hosting costs.

Happy deploying!

That’s it for today! Which platform do you prefer for deploying your React or Next.js apps? Let me know in the comments below! 👋