Skip to main content

​
Get Started in Minutes

Each lesson in the playground is a standalone Next.js app. Lessons 1-3 are complete and ready to use, with more lessons being added as the course progresses.
All lessons follow the same setup process. Pick any available lesson folder, run the commands below, and you’re ready to build.

​
Prerequisites

Before you begin, make sure you have:
1

Node.js 18 or higher

Download and install from nodejs.orgVerify your installation:
node --version
You should see v18.0.0 or higher.
2

A code editor

We recommend VS Code — it’s free and works great with Next.js.
Install the “ES7+ React/Redux/React-Native snippets” extension for faster coding.
3

A web browser

Any modern browser works (Chrome, Firefox, Safari, Edge).

​
Getting the Code

You have two options:
If you have Git installed:
git clone https://github.com/yourusername/nextjs-noob-playground.git
cd nextjs-noob-playground

​
Running Your First Lesson

Let’s run Lesson 01 to make sure everything works:
1

Navigate to the lesson folder

cd 01-hello-saas
Lessons 01-03 contain complete apps you can run independently. Lessons 04-07 are being developed.
2

Install dependencies

npm install
This downloads all the packages the app needs. It might take a minute the first time.
If you see errors about missing dependencies, make sure you’re using Node.js 18 or higher.
3

Start the development server

npm run dev
You should see output like:
▲ Next.js 14.x.x
- Local:        http://localhost:3000
- Ready in 1.2s
4

Open in your browser

Visit http://localhost:3000You should see your first Next.js app running!

​
Making Changes

The magic of Next.js is hot reloading — your changes appear instantly in the browser:
1

Open the code in your editor

Find and open app/page.js in the lesson folder.
2

Edit the code

Try changing some text in the file and save it.
3

See it update instantly

Switch to your browser — the changes appear automatically without refreshing!
This is how you’ll learn: make a change, see what happens, understand how it works. Repeat.

​
Moving to Other Lessons

To run a different lesson, stop the current server and navigate to the new folder: 
# Press Ctrl+C to stop the current server

# Navigate back to the root
cd ..

# Go to the next lesson
cd 02-pages-routing

# Install dependencies and run
npm install
npm run dev
You need to run npm install the first time for each lesson. After that, just npm run dev is enough.

​
Lesson Overview

Here’s what each lesson teaches:
LessonTopicKey SkillsStatus
01Hello SaaSRunning Next.js, hot reloading, builder mindset✅ Available
02Pages & RoutingMulti-page apps, navigation, file-based routing✅ Available
03Tailwind + ComponentsProfessional styling, DaisyUI, reusable components✅ Available
04Auth & DatabaseUser authentication, MongoDB integration🚧 Coming Soon
05Stripe PaymentsPayment processing, subscription plans🚧 Coming Soon
06DeploymentShipping to production with Vercel🚧 Coming Soon
07Full SaaSComplete production-ready application🚧 Coming Soon

​
Common Issues

If you see “Port 3000 is already in use”, you have another app running.Either:
  • Stop the other app (Ctrl+C in its terminal)
  • Use a different port: npm run dev -- -p 3001
Make sure you ran npm install in the lesson folder.If errors persist, try:
rm -rf node_modules package-lock.json
npm install
  • Make sure you saved the file (Cmd+S or Ctrl+S)
  • Check the terminal for error messages
  • Try refreshing the browser manually
  • Restart the dev server (Ctrl+C, then npm run dev)
Some lessons (04+) need environment variables.Copy the example file:
cp .env.local.example .env.local
Then edit .env.local with your values. Each lesson’s README explains what you need.

​
Tips for Success

Read the Comments

Every file has helpful comments explaining what the code does. Read them!

Break Things

Delete lines, change values, see what breaks. That’s how you learn.

Google Errors

Copy error messages into Google. You’ll find solutions and learn debugging.

Build Your Idea

Customize the apps with your own SaaS ideas. Make it personal.

​
Next Steps

1

Start with Lesson 01

Head to Lesson 01: Hello SaaS to begin your journey.
2

Join the Community

If you’re part of Zero to SaaS, join the community to share progress and get help.
3

Experiment Freely

Remember: each lesson is independent. You can’t break anything permanently. Experiment!
Pro tip: Keep a terminal window and your browser side-by-side. Edit code, save, and instantly see changes. This tight feedback loop is key to learning fast.
Ready to build? Let’s go! 🚀

Build docs developers (and LLMs) love

Get started for freeTalk to us