Next SaaS Stripe 入门套件

使用 SaaS 入门套件全速启动！

介绍 · 安装 · 技术栈 + 功能 · 作者 · 鸣谢

介绍

为您的下一个项目赋能，采用 Next.js 14、Prisma、Neon、Auth.js v5、Resend、React Email、Shadcn/ui 和 Stripe 技术栈。
所有这些都与 SaaS 入门套件无缝集成，加速您的开发和 SaaS 之旅。

安装

使用以下命令在本地克隆并创建此仓库：

npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"

或者，使用 Vercel 部署：

步骤

1. 使用 pnpm 安装依赖：

pnpm install

2. 将 .env.example 复制为 .env.local 并更新变量。

cp .env.example .env.local

3. 启动开发服务器：

pnpm run dev

[!注意]
我使用 npm-check-updates 包来更新此项目。

使用此命令更新您的项目：ncu -i --format group

路线图

• 将 eslint 升级到 v9
• 为成功订阅添加 resend

技术栈 + 功能

https://github.com/mickasmt/next-saas-stripe-starter/assets/62285783/828a4e0f-30e3-4cfe-96ff-4dfd9cd55124

框架

• Next.js – 用于构建高性能应用的 React 框架，提供最佳开发体验
• Auth.js – 轻松处理用户认证，支持 Google、Twitter、GitHub 等提供商
• Prisma – Node.js 的 Typescript 优先 ORM
• React Email – 灵活高效的电子邮件开发框架

平台

• Vercel – 轻松预览和部署 Git 更改
• Resend – 强大的电子邮件框架，简化电子邮件开发
• Neon – 具有自动扩展、分支、无限存储和慷慨免费套餐的无服务器 Postgres。

UI

• Tailwind CSS – 用于快速 UI 开发的实用优先 CSS 框架
• Shadcn/ui – 使用 Radix UI 和 Tailwind CSS 构建的可重用组件
• Framer Motion – React 动画库，轻松为组件添加动画
• Lucide – 简洁美观的像素完美图标
• next/font – 优化自定义字体并移除外部网络请求以提高性能
• ImageResponse – 在边缘生成动态 Open Graph 图像

钩子和工具

• useIntersectionObserver – React 钩子，观察元素进入或离开视口
• useLocalStorage – 在浏览器的本地存储中持久化数据
• useScroll – React 钩子，观察滚动位置（示例）
• nFormatter – 格式化数字，如 1.2k 或 1.2M
• capitalize – 将字符串的首字母大写
• truncate – 将字符串截断到指定长度
• use-debounce – 延迟函数调用/状态更新

代码质量

• TypeScript – 静态类型检查器，实现端到端类型安全
• Prettier – 固执己见的代码格式化工具，确保一致的代码风格
• ESLint – 用于 Next.js 和 TypeScript 的可插拔代码检查工具

其他

• Vercel Analytics – 以隐私友好的方式跟踪独立访客、页面浏览量等

作者

由 @miickasmt 于 2023 年创建，根据 MIT 许可证 发布。

鸣谢

本项目灵感来自 shadcn 的 Taxonomy、Steven Tey 的 Precedent 和 Antonio Erdeljac 的 Next 13 AI SaaS。

• Shadcn (@shadcn)
• Steven Tey (@steventey)
• Antonio Erdeljac (@YTCodeAntonio)