nextjs-saas-starter — Next.js SaaS模板

SHA-256: 2029d25f0aa70552f6b3bac0ad5cd3fcff4c16e7c6eca4987c26fa2be53e9383

2026-10-02T18:24:53.056Z

<h1 align="center">⚡ Next.js SaaS Starter</h1>

<p align="center">
  An opinionated, production-ready <b>Next.js 16 + Tailwind CSS v4</b> starter for shipping SaaS products fast.<br>
  Landing page, dark mode, and a typed UI kit — clone it and start building.
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Next.js-16-000000?logo=nextdotjs&logoColor=white" alt="Next.js 16">
  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react&logoColor=black" alt="React 19">
  <img src="https://img.shields.io/badge/Tailwind-v4-06B6D4?logo=tailwindcss&logoColor=white" alt="Tailwind v4">
  <img src="https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white" alt="TypeScript">
  <img src="https://img.shields.io/badge/License-MIT-green" alt="MIT License">
</p>

<p align="center">
  <a href="https://nextjs-saas-starter-iota.vercel.app"><b>🔗 Live Demo</b></a> •
  <a href="#-quick-start">Quick start</a> •
  <a href="#-whats-inside">What's inside</a> •
  <a href="#-project-structure">Structure</a> •
  <a href="#-customize">Customize</a> •
  <a href="#-deploy">Deploy</a>
</p>

---

## ✨ Why this starter

Most starters are either bloated with tools you'll rip out, or so bare they save you nothing. This one aims for the middle: **the pieces every SaaS landing needs, and nothing you'll have to fight.** Every component is yours — no black-box UI dependency.

- ⚡ **Next.js 16 App Router** with React 19 Server Components
- 🎨 **Tailwind CSS v4** — CSS-first theming, all tokens in one file
- 🌙 **Dark mode** via `next-themes`, no flash of wrong theme
- 🧩 **Typed UI kit** — `cva`-powered components you own
- 📄 **Full landing page** — hero, features, pricing, and CTA sections
- 🔍 **SEO-ready** — metadata, Open Graph, and semantic markup
- ✅ **Strict TypeScript + ESLint** and a clean, scalable structure

## 🚀 Quick start

```bash
# 1. Clone
git clone https://github.com/sumitchouksey/nextjs-saas-starter.git
cd nextjs-saas-starter

# 2. Install
npm install

# 3. Configure
cp .env.example .env.local

# 4. Run
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) — you're live.

## 📦 What's inside

| Area | Choice |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS v4 |
| Components | Custom, `class-variance-authority` |
| Icons | `lucide-react` |
| Theming | `next-themes` (light / dark / system) |
| Animation | `framer-motion` (ready to use) |
| Language | TypeScript (strict) |

## 🗂 Project structure

```
src/
├── app/
│   ├── layout.tsx        # Root layout, theme provider, metadata
│   ├── page.tsx          # Landing page composition
│   └── globals.css       # Tailwind v4 + design tokens
├── components/
│   ├── ui/               # Reusable primitives (Button, …)
│   ├── sections/         # Hero, Features, Pricing, CTA
│   ├── site-header.tsx
│   ├── site-footer.tsx
│   └── theme-toggle.tsx
└── lib/
    ├── site.ts           # Edit your product name, nav, links here
    └── utils.ts          # cn() class helper
```

## 🎨 Customize

- **Brand & copy** → edit [`src/lib/site.ts`](src/lib/site.ts)
- **Colors** → edit the CSS variables at the top of [`src/app/globals.css`](src/app/globals.css)
- **Sections** → add/remove in [`src/app/page.tsx`](src/app/page.tsx)

Everything is a plain component — delete what you don't need.

## ☁️ Deploy

Works anywhere Next.js runs. One-click on [Vercel](https://vercel.com/new), or build a container:

```bash
npm run build && npm run start
```

## 🤝 Contributing

Issues and PRs welcome. If this saved you time, a ⭐ helps others find it.

## 📄 License

[MIT](LICENSE) — free for personal and commercial use.

---

<p align="center">
  Built and maintained by <a href="https://nidavellirs.com"><b>Nidavellirs</b></a> — we build SaaS products and ship custom software for growing teams.
</p>

<p align="center">
  <a href="https://nidavellirs.com">🌐 Website</a> •
  <a href="https://nidavellirs.com/products/commenda">Commenda (AI comments)</a> •
  <a href="https://nidavellirs.com/products/shrno">Shrno (smart links)</a> •
  <a href="https://www.linkedin.com/company/nidavellirs/">LinkedIn</a>
</p>