Skip to main content
The Next.js Noob Playground is designed to be simple, modular, and easy to navigate. Each lesson is a standalone Next.js application. Lessons 1-3 are complete and ready to use, with lessons 4-7 being developed as the course progresses.

​
Repository Overview

The repository contains 7 numbered lesson folders, each representing a progressive step in building a SaaS product: 
nextjs-noob-playground/
├── 01-hello-saas/           # Your first Next.js page
├── 02-pages-routing/        # Multi-page navigation
├── 03-tailwind-components/  # Professional styling with Tailwind CSS
├── 04-auth-database/        # User authentication & MongoDB
├── 05-stripe-payments/      # Payment integration
├── 06-deployment/           # Deploy to production
└── 07-full-saas/            # Complete SaaS application
Each folder is completely independent. You don’t need to run lessons in order, though it’s recommended for learning. Currently, lessons 1-3 have full implementations, while lessons 4-7 are placeholders for upcoming content.

​
Individual Lesson Structure

Every lesson follows the same file structure pattern. Here’s what you’ll find in each folder:

​
Basic Lesson (01-hello-saas)

01-hello-saas/
├── app/
│   ├── layout.js           # Root layout wrapping all pages
│   └── page.js             # Home page (/ route)
├── package.json            # Dependencies and scripts
├── .gitignore             # Files to ignore in git
└── README.md              # Lesson-specific instructions

​
Advanced Lesson (03-tailwind-components)

03-tailwind-components/
├── app/
│   ├── components/         # Reusable components
│   │   ├── Navbar.js
│   │   ├── Footer.js
│   │   ├── Hero.js
│   │   ├── FeatureCard.js
│   │   └── PricingCard.js
│   ├── login/
│   │   └── page.js        # Login page (/login route)
│   ├── pricing/
│   │   └── page.js        # Pricing page (/pricing route)
│   ├── signup/
│   │   └── page.js        # Signup page (/signup route)
│   ├── globals.css        # Global styles
│   ├── layout.js          # Root layout
│   └── page.js            # Home page
├── package.json
├── tailwind.config.js     # Tailwind CSS configuration
├── postcss.config.js      # PostCSS configuration
└── README.md

​
Next.js 14 App Router Structure

The lessons use Next.js 14’s App Router (not the older Pages Router). Understanding this structure is crucial:

​
File-Based Routing

Next.js automatically creates routes based on folder structure: 
// This file creates the route: /
export default function HomePage() {
  return <div>Home Page</div>
}
The folder name determines the URL path. The page.js file inside renders the actual page content.

​
Root Layout (app/layout.js)

Every app has a root layout that wraps all pages:
app/layout.js
// This file wraps your entire app
// Every page will use this layout

export const metadata = {
  title: 'My SaaS App',
  description: 'Built with Next.js',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body style={{ margin: 0, padding: 0 }}>
        {children}
      </body>
    </html>
  )
}

​
Components Directory

Reusable components are stored in app/components/:
app/components/Navbar.js
import Link from 'next/link'

export default function Navbar() {
  return (
    <div className="navbar bg-base-100 shadow-lg">
      <div className="navbar-start">
        <Link href="/" className="btn btn-ghost text-xl">
          🚀 MySaaS
        </Link>
      </div>
      
      <div className="navbar-end gap-2">
        <Link href="/login" className="btn btn-ghost">
          Login
        </Link>
        <Link href="/signup" className="btn btn-primary">
          Sign Up
        </Link>
      </div>
    </div>
  )
}
Components in app/components/ are not routes. Only page.js files create routes.

​
API Routes

API endpoints are created in app/api/ with route.js files: 
app/
├── api/
│   ├── auth/
│   │   └── [...nextauth]/
│   │       └── route.js      # /api/auth/*
│   ├── projects/
│   │   └── route.js          # /api/projects
│   └── stripe/
│       └── route.js          # /api/stripe

​
Configuration Files

​
package.json

Defines dependencies and npm scripts: 
{
  "name": "01-hello-saas",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",       // Start development server
    "build": "next build",   // Build for production
    "start": "next start"    // Start production server
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

​
tailwind.config.js (Lessons 3+)

Configures Tailwind CSS styling: 
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',  // Scan all files in app/
  ],
  plugins: [require('daisyui')],
  daisyui: {
    themes: ["light"],
  },
}

​
Common Patterns Across Lessons

​
Consistent File Naming

  • page.js - Route pages
  • layout.js - Layout wrappers
  • route.js - API endpoints
  • Component files use PascalCase: Navbar.js, Footer.js

​
Progressive Complexity

Each lesson builds on concepts from previous ones:
1

Lesson 1: Hello SaaS

Basic Next.js app with one page - demonstrates core structure
2

Lesson 2: Pages & Routing

Multiple pages and navigation - introduces file-based routing
3

Lesson 3: Tailwind Components

Adds components/ directory and styling configuration files
4

Lesson 4: Auth & Database

Introduces lib/ for utilities, models/ for database schemas, and api/ routes
5

Lessons 5-7

Full-featured SaaS with all directories: components/, api/, lib/, models/

​
Understanding the App Directory

The app/ directory is the heart of every Next.js 14 application:
Next.js 14 uses the App Router architecture. The app/ directory contains all routes, layouts, and page components. This is different from older Next.js versions that used a pages/ directory.
  • app/ - Contains routes and pages (files here become URLs)
  • app/components/ - Contains reusable UI components (not routes)
For example:
  • app/pricing/page.js → Creates /pricing URL
  • app/components/Navbar.js → Reusable component, not a URL
Yes! You can organize code however you like:
  • app/utils/ for utility functions
  • app/hooks/ for custom React hooks
  • app/styles/ for CSS files
Only folders with page.js become routes.

​
Next Steps

Now that you understand the structure, learn how to:

Run Lessons

Start any lesson and begin coding

Customize Lessons

Adapt lessons for your own SaaS idea

Build docs developers (and LLMs) love

Get started for freeTalk to us