这是一个入门模板，用于使用Next.js构建 SaaS 应用程序，支持身份验证、支付 Stripe 集成以及登录用户的仪表板。
演示：https://next-saas-start.vercel.app/
2020 年，我制作了一门名为“React 2025”的课程，展示了如何使用 Next.js、Stripe 和其他工具构建 SaaS 应用程序。
好吧，快到 2025 年了，React 19 带来了很多我没有预料到的令人惊叹的新功能！该存储库演示了最新的 React 和 Next.js 模式。这些模式可以极大地简化构建 SaaS 时的一些常见任务，例如构建表单、与数据库交互等。
例如，React 现在内置了像useActionState这样的钩子来处理内联表单错误和挂起状态。 React Server Actions 可以替换从客户端调用 API 路由所需的大量样板代码。最后，React use hook 与 Next.js 相结合使得构建强大的useUser() hook 变得异常容易。
我们能够从根布局中的 Postgres 数据库中获取用户，但不能等待Promise 。相反，我们将Promise转发给 React 上下文提供者，在那里我们可以“解开”它并等待数据流。这意味着我们可以两全其美：从数据库获取数据的简单代码（例如getUser() ）和我们可以在客户端组件中使用的 React hook（例如useUser() ）。
有趣的事实：此应用程序的大部分 UI 都是使用 v0 构建的？如果您想了解此存储库，请点击此处了解更多详细信息。
/ )/pricing )git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install使用附带的安装脚本创建.env文件：
pnpm db:setup然后，运行数据库迁移并使用默认用户和团队为数据库播种：
pnpm db:migrate
pnpm db:seed这将创建以下用户和团队：
[email protected]admin123当然，您也可以通过/sign-up创建新用户。
最后，运行 Next.js 开发服务器：
pnpm dev在浏览器中打开 http://localhost:3000 以查看应用程序的运行情况。
或者，您可以通过 CLI 在本地侦听 Stripe webhooks 以处理订阅更改事件：
stripe listen --forward-to localhost:3000/api/stripe/webhook要测试 Stripe 付款，请使用以下测试卡详细信息：
4242 4242 4242 4242当您准备好将 SaaS 应用程序部署到生产环境时，请按照以下步骤操作：
https://yourdomain.com/api/stripe/webhook ）。checkout.session.completed 、 customer.subscription.updated ）。在 Vercel 项目设置中（或在部署期间），添加所有必要的环境变量。确保更新生产环境的值，包括：
BASE_URL ：将其设置为您的生产域。STRIPE_SECRET_KEY ：在生产环境中使用您的 Stripe 密钥。STRIPE_WEBHOOK_SECRET ：使用您在步骤 1 中创建的生产 Webhook 中的 Webhook 密钥。POSTGRES_URL ：将其设置为您的生产数据库 URL。AUTH_SECRET ：将其设置为随机字符串。 openssl rand -base64 32将生成一个。 虽然此模板有意最小化并用作学习资源，但社区中还有其他功能更齐全的付费版本：
