Next.jsReactSaaS启动器

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

作者 mageshyt

基于 Next.js 的 SaaS 启动器模板,集成 Auth.js、Stripe 订阅、Prisma 数据库、MDX 内容与邮件发送,适合搭建带认证与付费的 SaaS 站点。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

使用 Auth.js 提供多提供商认证,并划分认证路由与受保护仪表盘路由

02

集成 Stripe 处理订阅支付与账单

03

使用 Prisma 与 Neon 进行类型安全的数据库操作

04

通过 React Email 与 Resend 发送事务邮件,emails 目录存放邮件模板

05

使用 MDX 管理博客、文档、指南和静态页面内容

06

基于 Shadcn/ui 组件,提供明暗主题切换、响应式布局与 cmdk 命令菜单

模板详细介绍

Nextjs-saas-starter 是一个基于 Next.js 的 SaaS 启动器模板,仓库采用 MIT 许可,可免费使用、修改和分发,但需保留版权与许可声明。模板围绕 SaaS 常见链路组织代码:使用 Auth.js 处理多提供商认证,Stripe 处理订阅支付与账单,Prisma 配合 Neon 做类型安全的数据库操作,React Email 与 Resend 发送事务邮件,并用 MDX 管理博客、文档、指南和静态页面内容。界面层使用 Shadcn/ui 组件,提供明暗主题切换、响应式布局和基于 cmdk 的命令菜单搜索。

项目结构按路由分组划分:app 目录下区分认证、受保护仪表盘、公开营销页与 API 路由;components 存放 UI、表单与全局组件;content 存放博客、文档、指南和页面内容;此外还有 lib、utils、config、types、prisma、emails、tests 等目录。README 给出的快速开始步骤为克隆仓库、安装依赖、复制 .env.example 为 .env,然后启动开发服务器。

需要注意的限制:模板依赖 Stripe、Neon、Resend 等外部服务,这些服务可能另外收费,代码的 MIT 许可不覆盖演示图片、字体、图标等第三方素材,使用前需分别核对各自许可。README 的 Roadmap 中列出改进测试覆盖、增加支付提供商、实现 webhooks、添加分析、创建更多邮件模板等尚未完成的事项,说明部分能力仍在规划中。仓库星标数较少,资料未提供性能、稳定性或生产可用性的验证信息。

Next.jsSaaS启动器

适合你的项目吗?

适用场景

  • 搭建需要用户注册登录与订阅付费的 SaaS 产品原型
  • 为 SaaS 项目准备包含营销页、仪表盘和 API 路由的初始代码结构
  • 使用 MDX 维护博客、文档和指南等内容页面
  • 在 Next.js 项目中接入 Stripe 订阅、Prisma 数据库与事务邮件发送

适合人群

  • 熟悉 Next.js 与 React,希望快速获得 SaaS 基础结构的开发者
  • 需要认证、订阅支付和数据库层起步代码的个人或小团队项目
  • 计划自行配置 Stripe、Neon、Resend 等外部服务的开发者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后安装依赖,并将 .env.example 复制为 .env 配置环境变量

  2. 2

    需要自行准备 Stripe、Neon、Resend 等外部服务的账号与密钥,这些服务可能另外收费

  3. 3

    演示图片、字体、图标等第三方素材需按各自许可单独核对,不随代码的 MIT 许可一并授权

  4. 4

    README 的 Roadmap 中 webhooks、分析、更多支付提供商等仍为待办事项,使用前应确认实际实现情况

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 模板集成 Stripe 订阅支付与账单功能,使用前需自行注册 Stripe 账号并配置 API 密钥,该服务可能产生费用。
  • 数据库层依赖 Neon 服务,需自行注册 Neon 账号并配置连接信息,该外部服务可能另外收费。
  • 事务邮件通过 Resend 发送,需自行注册 Resend 账号并配置 API 密钥,该服务可能产生费用。
  • README 的 Roadmap 将 webhooks 列为待办事项,说明该能力尚未实现,使用前需确认实际代码情况。
  • Roadmap 中增加更多支付提供商仍为待办,当前仅集成 Stripe,其他支付方式尚未支持。
  • Roadmap 中分析功能尚未实现,模板当前不包含内置分析能力。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

- 💳 **Stripe** - Subscription payments and billing

README 原文

- 🗃️ **Prisma & Neon** - Type-safe database operations

README 原文

- 📧 **React Email & Resend** - Beautiful transactional emails

README 原文

- [ ] Implement webhooks

README 原文

- [ ] Add more payment providers

README 原文

- [ ] Add analytics

README 原文
https://github.com/mageshyt/Nextjs-saas-starter/blob/main/LICENSEhttps://github.com/mageshyt/Nextjs-saas-starter/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 74 / 100
技术栈
Next.js · React
网站类型
SaaS · 启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2025-02-09
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: aafa1d932076c1b8afaa33001f21f3213840f3c734d48eaa35289ee6194e3a9a

2026-10-03T03:17:45.919Z

来源文件 / 仓库
<a href="https://next-saas-stripe-starter.vercel.app">
  <img alt="SaaS Starter" src="public/_static/tech-stack.png">
  <h1 align="center">🚀 Next.js SaaS Starter Kit</h1>
</a>

<p align="center">
A modern, feature-rich starter kit for building SaaS applications with Next.js 14, authentication, payments, and more.

</p>


<p align="center">
  <a href="#-features"><strong>Features</strong></a> ·
  <a href="#-quick-start"><strong>Quick Start</strong></a> ·
  <a href="#-documentation"><strong>Documentation</strong></a> ·
  <a href="#-testing"><strong>Testing</strong></a> ·
  <a href="#-roadmap"><strong>Roadmap</strong></a> ·
  <a href="#-contributing"><strong>Contributing</strong></a> ·
  <a href="#-license"><strong>License</strong></a> ·
  <a href="#-support"><strong>Support</strong></a> ·
  <a href="#-links"><strong>Links</strong></a>
</p>
<br/>


## ✨ Features

- 🏗️ **Next.js 14** - The React framework for production
- 🔐 **Auth.js v5** - Authentication with multiple providers
- 💳 **Stripe** - Subscription payments and billing
- 📧 **React Email & Resend** - Beautiful transactional emails
- 🎨 **Shadcn/ui** - Beautiful and accessible UI components
- 🗃️ **Prisma & Neon** - Type-safe database operations
- 📝 **MDX** - Content management with Markdown
- 🔍 **Command Menu** - Spotlight-like search with cmdk
- 🌙 **Dark Mode** - Light/dark mode with next-themes
- 📱 **Responsive** - Mobile-first design approach

## 🚗 Quick Start

```bash
# Clone the repository
git clone https://github.com/yourusername/next-saas-starter.git

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env

# Start development server
bun run dev
```

## 📁 Project Structure

```bash
.
├── app/
│   ├── (auth)/        # Authentication routes
│   ├── (dashboard)/   # Protected dashboard routes
│   ├── (marketing)/   # Public marketing pages
│   ├── api/           # API routes
│   └── layout.tsx     # Root layout
├── components/
│   ├── ui/            # Reusable UI components
│   ├── forms/         # Form components
│   └── global/        # Shared components
├── content/
│   ├── blog/          # Blog posts and articles
│   ├── docs/          # Documentation pages
│   ├── guides/        # User guides and tutorials
│   └── pages/         # Static pages content
├── lib/               # Core library code
├── utils/            # Utility functions & helpers
├── config/           # Application configuration
├── types/            # TypeScript type definitions
├── prisma/
│   └── schema.prisma  # Database schema
├── public/            # Static assets
├── styles/           # Global styles
├── tests/            # Test files
└── emails/           # Email templates
```

## 📚 Documentation

Visit our [documentation](https://nextjs-saas-starterkit.vercel.app/docs) to learn more about:

## 🧪 Testing

```bash
# Run tests
bun run  test
```

## 🛣️ Roadmap

- [ ] Improve test coverage
- [ ] Add more payment providers
- [ ] Implement webhooks
- [ ] Add analytics
- [ ] Create more email templates


## 🤝 Contributing

We welcome contributions! Please read our [contributing guide](CONTRIBUTING.md) to get started.

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 💖 Support

If you find this project helpful, please consider:
- Giving it a ⭐️ on GitHub
- Sharing it with others

## 🔗 Links

- [Website](https://magesh-portfolio.vercel.app/)
- [Documentation](https://nextjs-saas-starterkit.vercel.app/docs)
- [GitHub Repository](https://github.com/mageshyt/nextjs-saas-starter)

## Credits & Thanks 🙏

This project wouldn't be possible without these amazing people:

- [@shadcn](https://twitter.com/shadcn) - For the incredible UI components and Taxonomy project that inspired this starter
- [@rasmickyy](https://x.com/rasmickyy) - For teaching and inspiring the implementation of SEO optimization, Stripe integration, and v1 SaaS architecture patterns
Special thanks to:
- The entire Next.js team for the amazing framework
- Vercel for their excellent hosting platform
- The open source community for their continuous support
### Additional Resources & Inspiration:
- [Magic UI Design System](https://magicui.design/docs/templates/startup)
- [NextJS Starter Kit by Michael Shimeles](https://github.com/michaelshimeles/nextjs-starter-kit)



This project is built on the shoulders of giants, and we're grateful for their contributions to the ecosystem.

---

Built with ❤️ by [MageshYT](https://x.com/yt_magesh)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。