f 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 LearnWithJossy.com
, 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
Pro Tip: At LearnWithJossy.com
, I always advise students to use version control early, it makes collaboration and deployment 10x easier.
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 LearnWithJossy.com
, 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.
Step 5: Continuous Deployment
Every time you make a change and push to GitHub, Vercel automatically redeploys your site — no manual uploads needed.
This means you can focus on coding while Vercel handles the hosting magic.
At LearnWithJossy.com
, I encourage all students to take advantage of this feature it’s what makes modern web development so efficient.
Bonus Tip: Environment Variables
If your app uses API keys (like Contentful, Firebase, etc.), add them safely under Settings → Environment Variables in Vercel.
Never hardcode sensitive keys in your project
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 LearnWithJossy.com
.
At Learn With Jossy, I teach practical web development helping beginners build skills that actually make money online.
Top comments (0)