Getting Started with Next.js 16+:
A Simple Setup Guide

If you're a solo developer or indie hacker looking to build a SaaS app quickly, Next.js 16+ is one of the best choices today. It combines the power of React with built-in performance optimizations, server-side rendering, and a great developer experience.

This guide walks you through setting up a fresh Next.js 16+ project with Tailwind CSS the exact foundation used in SaaSJet. By the end, you'll have a clean, production-ready starter with styling out of the box.

Why Next.js + Tailwind?

• Fast development: File-based routing, automatic code splitting, and image optimization.
• Great DX: Hot reloading, TypeScript support by default, and the modern App Router.
• Tailwind CSS: Utility-first styling means no more writing custom CSS build beautiful, responsive UIs in minutes.

Step 1: Create a New Next.js App

Open your terminal and run:

npx create-next-app@latest my-saas-app

You'll be prompted with a few questions. Choose these options:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes (recommended)
• src/ directory: Yes (optional, but keeps things organized)
• Customize import alias: No (or @/* if you prefer)

This sets up Next.js 16+ with the App Router and Tailwind pre-configured.

Step 2: Project Structure Overview

After setup, your project will look like this:

my-saas-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Root layout
│   │   ├── page.tsx        # Home page
│   │   └── globals.css     # Tailwind imports
├── public/
├── tailwind.config.ts
├── next.config.mjs
└── package.json

The app/ directory is where all your routes and pages live.

Step 3: Run Your App

cd my-saas-app
npm run dev

Visit http://localhost:3000 you should see the default Next.js welcome page styled with Tailwind.

Step 4: Clean Up & Build Your First Page

Replace the contents of src/app/page.tsx with a simple landing page:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
      <h1 className="text-5xl font-bold text-gray-900 mb-4">
        Welcome to Your SaaS
      </h1>
      <p className="text-xl text-gray-600">
        Built with Next.js 16+ and Tailwind CSS
      </p>
      <button className="mt-8 rounded-lg bg-blue-600 px-6 py-3 text-white hover:bg-blue-700 transition">
        Get Started
      </button>
    </main>
  );
}

You now have a responsive, centered landing page all without writing a single line of CSS.

Step 5: Next Steps for SaaS Development

Once your base is set:

• Add authentication (BetterAuth)
• Connect Stripe for payments
• Set up Prisma + PostgreSQL for your database
• Build a dashboard with protected routes

That’s exactly what SaaSJet gives you out of the box all these features pre-configured and ready to customize.

Final Thoughts

Setting up Next.js with Tailwind takes just minutes, but it gives you a solid foundation for building fast, scalable SaaS applications. The App Router in Next.js 16+ makes routing and data fetching simpler than ever.

Want to skip the setup and jump straight into building your product?