saas-starter README

The project's README from github.com/nextjs/saas-starter. As one markdown file: README.md.

Next.js SaaS Starter

This is a starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users.

Demo: https://next-saas-start.vercel.app/

Features

Tech Stack

Getting Started

git clone https://github.com/nextjs/saas-starter
cd saas-starter
pnpm install

Running Locally

Install and log in to your Stripe account:

stripe login

Use the included setup script to create your .env file:

pnpm db:setup

Run the database migrations and seed the database with a default user and team:

pnpm db:migrate
pnpm db:seed

This will create the following user and team:

You can also create new users through the /sign-up route.

Finally, run the Next.js development server:

pnpm dev

Open http://localhost:3000 in your browser to see the app in action.

You can listen for Stripe webhooks locally through their CLI to handle subscription change events:

stripe listen --forward-to localhost:3000/api/stripe/webhook

Testing Payments

To test Stripe payments, use the following test card details:

Going to Production

When you're ready to deploy your SaaS application to production, follow these steps:

Set up a production Stripe webhook

  1. Go to the Stripe Dashboard and create a new webhook for your production environment.
  2. Set the endpoint URL to your production API route (e.g., https://yourdomain.com/api/stripe/webhook).
  3. Select the events you want to listen for (e.g., checkout.session.completed, customer.subscription.updated).

Deploy to Vercel

  1. Push your code to a GitHub repository.
  2. Connect your repository to Vercel and deploy it.
  3. Follow the Vercel deployment process, which will guide you through setting up your project.

Add environment variables

In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:

  1. BASE_URL: Set this to your production domain.
  2. STRIPE_SECRET_KEY: Use your Stripe secret key for the production environment.
  3. STRIPE_WEBHOOK_SECRET: Use the webhook secret from the production webhook you created in step 1.
  4. POSTGRES_URL: Set this to your production database URL.
  5. AUTH_SECRET: Set this to a random string. openssl rand -base64 32 will generate one.

Other Templates

While this template is intentionally minimal and to be used as a learning resource, there are other paid versions in the community which are more full-featured:

saas-starter (nextjs/saas-starter)

Searching Database…

16.2K ·GitHub
Saas-starter
这是什么?一个免费开源的 SaaS 网页应用起步模板,基于 Next.js 构建,由 Next.js 官方组织维护:登录认证、Stripe 支付和面向已登录用户的控制面板都已预先配置好。
这是成品,还是需要我自己在其基础上开发的代码?它是一个代码模板,需要克隆下来再在上面开发自己的产品,不是一个装好就能用的东西。README 把它定位为刻意精简,同时也可以当作学习资料;如果想要开箱即用的更多功能,它还指向了付费的社区版本。
如何在本地把它跑起来?先安装并登录你的 Stripe 账号,运行自带的安装脚本来生成 .env 文件,然后执行数据库迁移和数据初始化——这一步会创建一个默认团队,用户为 [email protected](密码 admin123)。最后启动 Next.js 开发服务器(next dev --turbopack)。
在运行之前,我需要准备哪些账号或服务?需要一个 Postgres 数据库和一个 Stripe 账号。技术栈是 Next.js、Postgres、Drizzle ORM、Stripe 和 shadcn/ui,另外在本地监听 webhook 还需要 Stripe CLI。
它能直接上线,还是上线前还有工作要做?它是刻意精简的——只是一个基础骨架,不是完整产品。正式上线要靠你自己:创建生产环境的 Stripe webhook,部署到 Vercel,并自行设置 STRIPESECRETKEY、STRIPEWEBHOOKSECRET、POSTGRESURL、AUTHSECRET 等环境变量。
我必须是经验丰富的 Next.js 开发者才能用吗?有帮助,因为你要在一个 TypeScript/Next.js 代码库上,结合 Drizzle 和 Stripe 做扩展。不过它明确被定位为学习资料,所以把它拿来研究学习也是一种合理的用法。
它开箱自带哪些东西?营销落地页、连接 Stripe Checkout 的定价页、带用户和团队增删改查功能的控制面板页面、基础的 Owner/Member 权限控制(RBAC)、通过 Stripe Customer Portal 管理订阅、基于 Cookie 中 JWT 的邮箱密码登录、保护路由的中间件,以及一个操作日志系统。
数据库表结构变更怎么管理?项目使用 Drizzle 配合 drizzle-kit:db:generate 生成迁移文件,db:migrate 执行迁移,db:studio 打开一个图形界面来浏览数据。
不用真实银行卡能测试支付吗?可以。使用 Stripe 的测试卡号 4242 4242 4242 4242,有效期随便填一个未来日期,CVC 随便填 3 位数字,并在本地通过 Stripe CLI 监听订阅相关事件。
What are similar projects?react-starter-kit, open-saas, full-stack-fastapi-template, chatbot, Next-js-Boilerplate, taxonomy, sales-crm, SIAPIN
Which topics is it in?subscriptions, crud, starter-kit, stripe, drizzle-orm, postgres, middleware, shadcn-ui, boilerplate, jwt, full-stack, rbac
Creator
nextjs
Size
0.4 MB
Stars
16.2K
Updated
CommitDec 11
Age
2y
Commits · 90 Days