How to Deploy a Next.js App for Free on Vercel

If you’ve built your first Next.js project and you’re wondering how to make it live on the internet good news: it’s easier than you think!

In this guide, I’ll walk you step-by-step through deploying your Next.js app to Vercel, for free.

I’m sharing this from my experience at Jossy Code Academy where we teach beginners how to go from writing their first line of code to launching real-world projects online.

What You’ll Learn

By the end of this guide, you’ll know how to:

• Push your Next.js project to GitHub

• Connect GitHub to Vercel

• Configure your deployment settings

• Go live with a custom domain

Step 1: Push Your Project to GitHub

If you haven’t already, create a GitHub account and upload your Next.js project.

You can do this from your terminal:

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/yourusername/yourproject.git

git push -u origin main

Step 2: Create a Vercel Account

Go to Vercel.com and sign up using your GitHub account.

Once logged in, click “New Project” and import your Next.js repository.

Vercel automatically detects Next.js projects, so you don’t need to configure anything manually.

Step 3: Configure Your Build Settings

Usually, Vercel will handle this for you, but make sure your settings look like this:

Framework Preset: Next.js

Build Command: next build

Output Directory: .next

Click Deploy, and within a few seconds, your site will be live on a temporary URL like:

https://yourproject.vercel.app

This is the fun part — you’ve just deployed your Next.js app for free!

At Jossy Code Academy telegram channel we teach you how to take this further by adding SEO optimization, analytics, and API integrations.we teach students how to take this further by adding SEO optimization, analytics, and API integrations.

Step 4: Add a Custom Domain (Optional)

If you have your own domain name (like learnwithjossy.com), you can connect it in your Vercel dashboard under Settings → Domains.

Just type your domain, and Vercel will guide you through updating your DNS records.

Final Thoughts

Congratulations, your Next.js app is live!

You’ve just learned one of the most important steps in becoming a full-stack developer.

If you want to go beyond deployment and learn how to build complete web apps from scratch, join me at Jossy Code Academy telegram channel

In the channel, we teach practical web development helping beginners build skills that actually make money online.