Skip to main content
Welcome to your SaaS journey! This lesson introduces you to Next.js and the mindset you need to ship products fast.

​
What You’ll Learn

In this first lesson (Day 1), you’ll learn:
  • How to run a Next.js app
  • The SaaS builder mindset
  • Shipping fast vs shipping perfect
  • How hot reloading works

​
File Structure

This lesson has a minimal Next.js structure: 
01-hello-saas/
├── app/
│   ├── layout.js      # Wraps your entire app
│   └── page.js        # Your home page
├── package.json       # Dependencies
└── README.md

​
Setting Up

First, navigate to the lesson folder and install dependencies: 
cd 01-hello-saas
npm install
npm run dev
Open http://localhost:3000 in your browser.

​
Code Walkthrough

​
The Root Layout

Every Next.js app needs a root layout. This file wraps all your 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>
  )
}
The metadata object sets your page title and description for SEO. The {children} prop is where your page content will be rendered.

​
Your First Page

Here’s your home page with inline styling:
app/page.js
// Welcome to your SaaS journey!
// This is your first Next.js page.
// The mindset: ship fast, not perfect. This page isn't fancy, and that's OK!

export default function HomePage() {
  return (
    <div style={{ 
      padding: '50px',
      fontFamily: 'Arial, sans-serif',
      maxWidth: '800px',
      margin: '0 auto'
    }}>
      <h1 style={{ fontSize: '42px', marginBottom: '20px' }}>
        🚀 Welcome to Your SaaS Journey!
      </h1>
      
      <p style={{ fontSize: '18px', lineHeight: '1.6', marginBottom: '15px' }}>
        You just created your first Next.js app. This is the foundation of your SaaS product.
      </p>
      
      <div style={{ 
        backgroundColor: '#f0f7ff', 
        padding: '20px', 
        borderRadius: '8px',
        marginTop: '30px'
      }}>
        <h2 style={{ marginTop: '0' }}>💡 SaaS Builder Mindset:</h2>
        <ul style={{ lineHeight: '1.8' }}>
          <li><strong>Ship fast, not perfect</strong> - This page is simple, and that's good enough for now</li>
          <li><strong>Code as an entrepreneur</strong> - Focus on solving problems, not perfect code</li>
          <li><strong>Use AI to help</strong> - Don't memorize everything, ask AI when stuck</li>
          <li><strong>Stay motivated</strong> - You're building something real!</li>
        </ul>
      </div>
      
      <p style={{ 
        marginTop: '30px', 
        padding: '15px', 
        backgroundColor: '#fff3cd',
        borderRadius: '6px'
      }}>
        <strong>Next step:</strong> Try changing the text above and save the file. 
        Your browser will automatically refresh. That's hot reloading in action! ⚡
      </p>
    </div>
  )
}

​
The SaaS Builder Mindset

  • Perfect code doesn’t matter if nobody uses your product
  • Ship fast, get feedback, improve - iteration beats perfection
  • Use AI tools when stuck (ChatGPT, Claude, Cursor)
  • Your first version will be ugly - and that’s completely normal!
  • Build something YOU would actually use
  • Show progress to friends (even if it’s rough)
  • Celebrate small wins like getting this running!
  • Remember: every big SaaS started as a simple page like this

​
Key Concepts

​
Hot Reloading

When you edit and save a file, Next.js automatically refreshes your browser. This is called hot reloading (or Fast Refresh).
Try it now! Change the heading text in app/page.js and save. Watch your browser update instantly.

​
Server Components

By default, all components in Next.js 14+ are Server Components. They render on the server, which makes your app faster and improves SEO.

​
Try This

1

Change the heading

Edit the <h1> text to describe YOUR SaaS idea
2

Add your problem statement

Add a new paragraph explaining what problem you’re solving
3

Customize colors

Change the background colors in the style objects
4

Add your name

Add your name as the founder at the bottom of the page

​
Dependencies

This lesson uses the minimal Next.js dependencies:
package.json
{
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
Next.js includes React automatically - you don’t need to import it in your components.

​
Next Steps

Ready to build a multi-page SaaS website? Move to Lesson 2: Pages & Routing to create multiple pages (landing page, pricing, about) with navigation.

Build docs developers (and LLMs) love

Get started for freeTalk to us