The Best Fluffy Pancakes recipe you will fall in love with. Full of tips and tricks to help you make the best pancakes.
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.
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 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:
yourproject.vercel.app
This is the fun part, you’ve just deployed your Next.js app for free!
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 on How to Deploy a Next.js App for Free on Vercel
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.
