Next.jsReactSaaS启动器

saasany — Next.js SaaS模板

作者 sit-in

saasany 是 sit-in 开源的 Next.js 16 AI SaaS 模板,README 称其内置认证、Stripe 支付、AI 聊天、i18n、仪表盘、管理后台与 MDX 博客,并提供 Vercel 一键部署入口。

看看你的网站会是什么样

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

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

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

认证基于 Better Auth,支持邮箱密码与 GitHub OAuth,并包含会话管理

02

支付集成 Stripe 订阅、Checkout、客户门户与 Webhook

03

AI 能力基于 Vercel AI SDK 与 OpenAI,提供流式聊天与文本生成,模型可在 src/lib/ai.ts 替换

04

数据层使用 Drizzle ORM 连接 Neon PostgreSQL,通过 npm run db:push 初始化

05

国际化使用 next-intl,内置英文与中文并采用 URL 前缀路由

06

界面基于 Tailwind CSS v4 与 shadcn/ui,提供 6 套主题与跟随系统的深色模式

模板详细介绍

saasany 是一个基于 Next.js 16 App Router 的 AI SaaS 起步模板,仓库为 https://github.com/sit-in/saasany,采用 MIT 许可。README 将其定位为“production-ready”,但本介绍只依据 README 列出的内容整理,不对实际生产就绪程度做判断。

模板按 README 的架构图与目录结构组织:认证使用 Better Auth,支持邮箱密码与 GitHub OAuth;支付使用 Stripe,包含订阅、Checkout、客户门户与 Webhook;AI 部分基于 Vercel AI SDK 与 OpenAI,提供流式聊天与文本生成,模型可在 src/lib/ai.ts 中替换;数据层使用 Drizzle ORM 连接 Neon PostgreSQL;国际化使用 next-intl,内置英文与中文并采用 URL 前缀路由。界面基于 Tailwind CSS v4 与 shadcn/ui,提供 6 套配色主题(Emerald、Ocean、Violet、Amber、Rose、Zinc)与跟随系统的深色模式。

功能模块方面,README 列出仪表盘(可折叠侧边栏、统计卡片、设置、账单)、管理后台(用户管理、订阅统计、RBAC)、MDX 博客(含 i18n)、API Key 的生成/列出/撤销,以及 SEO 相关能力(sitemap、robots.txt、动态 OG 图片)。邮件由 Resend 发送,模板内含邮件模板目录。

使用限制与前提:需要自行准备 DATABASE_URL、BETTER_AUTH_SECRET、Stripe 相关密钥、OPENAI_API_KEY、RESEND_API_KEY 等环境变量,GitHub OAuth 凭据为可选;数据库需通过 npm run db:push 初始化。README 未说明测试覆盖情况、具体性能表现、除 Vercel 之外的其他部署方式细节,也未给出各依赖的具体版本号,这些内容需查阅仓库文件确认。

Next.jsReactSaaS启动器

适合你的项目吗?

适用场景

  • 需要快速搭建带订阅付费的 AI SaaS 产品骨架时,可基于该模板改造
  • 需要邮箱密码与 GitHub OAuth 登录、并配套仪表盘与设置页面的项目
  • 需要中英双语站点、并希望博客内容也支持多语言的场景
  • 需要 Stripe 订阅、客户门户与 Webhook 处理流程的付费产品
  • 需要管理后台进行用户管理与订阅统计、并区分权限的项目

适合人群

  • 熟悉 Next.js App Router 与 TypeScript、希望以现成结构起步的开发者
  • 计划部署到 Vercel 并使用 Neon PostgreSQL 的项目
  • 需要自行配置 Stripe、OpenAI、Resend 等第三方密钥的团队
  • 希望以 MIT 许可使用并二次修改模板的开发者

上手与定制指南

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

  1. 1

    克隆仓库后执行 npm install,并复制 .env.example 为 .env.local 填入 API 密钥

  2. 2

    需配置 DATABASE_URL、BETTER_AUTH_SECRET、Stripe 密钥、OPENAI_API_KEY、RESEND_API_KEY;GitHub OAuth 凭据为可选

  3. 3

    执行 npm run db:push 初始化数据库,再用 npm run dev 在 http://localhost:3000 启动

  4. 4

    生产环境 Stripe Webhook 需指向 https://yourdomain.com/api/stripe/webhook,事件包含 checkout.session.completed、customer.subscription.updated、customer.subscription.deleted

  5. 5

    品牌信息集中在 src/config/site.ts,配色在 src/app/globals.css,AI 模型配置在 src/lib/ai.ts

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 需自行准备并填写 API 密钥(如数据库、Stripe、OpenAI、Resend 等)才能运行。
  • 需要自行注册并配置 Neon 数据库,提供 DATABASE_URL。
  • 需要自行注册 Stripe 并配置密钥,支付功能依赖 Stripe 账户。
  • 需要自行注册 OpenAI 并配置 API Key,AI 功能依赖 OpenAI 服务。
  • 需要自行注册 Resend 并配置 API Key,邮件功能依赖 Resend 服务。
  • GitHub OAuth 凭据为可选,如需该登录方式需自行配置。
  • 生产环境需自行在 Stripe 后台配置 Webhook 指向自己的域名。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

cp .env.example .env.local # fill in your API keys

README 原文

DATABASE_URL= # Neon → https://console.neon.tech

README 原文

STRIPE_SECRET_KEY= # Stripe Dashboard

README 原文

OPENAI_API_KEY= # OpenAI Platform

README 原文

RESEND_API_KEY= # Resend Dashboard

README 原文

GITHUB_CLIENT_ID= # (optional) GitHub OAuth

README 原文

# Dashboard → Webhooks → https://yourdomain.com/api/stripe/webhook

README 原文
https://github.com/sit-in/saasany/blob/main/LICENSEhttps://github.com/sit-in/saasany/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2026-03-26
截图检查日期
2026-10-14

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: b7e35fcc966c86991ed622d0b782d87e28b108fdf1b63dda8db401e9f819287f

2026-10-14T18:56:32.739Z

来源文件 / 仓库
# saasany

> Production-ready Next.js 16 template for AI SaaS. Auth, payments, AI chat, i18n — out of the box.

[English](README.md) | [中文](README_ZH.md) | [Demo](https://saasany.vercel.app) | [Docs](https://github.com/sit-in/saasany)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/sit-in/saasany&env=DATABASE_URL,BETTER_AUTH_SECRET,STRIPE_SECRET_KEY,STRIPE_WEBHOOK_SECRET,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,OPENAI_API_KEY,RESEND_API_KEY&project-name=my-saas)
[![CI](https://github.com/sit-in/saasany/actions/workflows/ci.yml/badge.svg)](https://github.com/sit-in/saasany/actions/workflows/ci.yml)
[![MIT License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)

## Architecture

```
┌─────────────────────────────────────────────────────┐
│                    Next.js 16 App Router             │
├──────────┬──────────┬──────────┬────────────────────┤
│  Auth    │ Payments │    AI    │       i18n          │
│  Better  │  Stripe  │  OpenAI  │    next-intl        │
│  Auth    │ Checkout │ Vercel   │    (EN/ZH)          │
│  OAuth   │ Webhooks │ AI SDK   │                     │
├──────────┴──────────┴──────────┴────────────────────┤
│  Drizzle ORM  →  Neon PostgreSQL                     │
├─────────────────────────────────────────────────────┤
│  Tailwind v4 + shadcn/ui  │  6 Color Themes         │
│  Instrument Serif + DM Sans + Geist Mono             │
├─────────────────────────────────────────────────────┤
│                  Deploy: Vercel                      │
└─────────────────────────────────────────────────────┘
```

## Quick Start

```bash
git clone https://github.com/sit-in/saasany.git my-saas
cd my-saas
npm install
cp .env.example .env.local   # fill in your API keys
npm run db:push               # init database
npm run dev                   # http://localhost:3000
```

Or click the **Deploy with Vercel** button above for one-click deployment.

## What's Included

- **Auth** — Email/password + GitHub OAuth, session management
- **Payments** — Stripe subscriptions, checkout, customer portal, webhooks
- **AI** — Streaming chat + text generation, swappable models
- **Dashboard** — Collapsible sidebar, stat cards, settings, billing
- **Admin** — User management, subscription stats, RBAC
- **Blog** — MDX + i18n
- **API Keys** — Generate, list, revoke
- **i18n** — English + Chinese, URL prefix routing
- **6 Themes** — Emerald, Ocean, Violet, Amber, Rose, Zinc
- **Dark Mode** — System-aware
- **SEO** — Sitemap, robots.txt, dynamic OG images

## Stack

```
Next.js 16 (App Router) + React 19 + TypeScript
Tailwind CSS v4 + shadcn/ui
Drizzle ORM + Neon PostgreSQL
Better Auth (email + OAuth)
Stripe (subscriptions + webhooks)
Vercel AI SDK + OpenAI
next-intl (EN/ZH)
Resend (email)
```

## Project Structure

```
src/
├── app/
│   ├── [locale]/
│   │   ├── (auth)/            # Sign in, sign up, forgot password
│   │   ├── (dashboard)/       # Dashboard, settings, billing, AI, admin
│   │   ├── (marketing)/       # Blog, pricing, privacy, terms
│   │   └── page.tsx           # Landing page
│   └── api/
│       ├── ai/                # Chat + generation
│       ├── auth/              # Better Auth
│       ├── keys/              # API key management
│       ├── og/                # OG image generation
│       └── stripe/            # Checkout, webhook, portal
├── components/
│   ├── dashboard/             # Sidebar
│   ├── emails/                # Email templates
│   ├── landing/               # Hero, features, pricing
│   ├── layout/                # Header, footer, theme, locale switcher
│   └── ui/                    # shadcn/ui
├── config/site.ts             # Site config (start here to rebrand)
├── content/blog/              # MDX blog (en/ + zh/)
├── i18n/messages/             # Translation files
└── lib/
    ├── db/                    # Drizzle schema
    ├── auth.ts                # Auth config
    ├── email.ts               # Email
    ├── stripe.ts              # Stripe
    └── ai.ts                  # AI model config
```

## Environment Variables

```bash
DATABASE_URL=                  # Neon → https://console.neon.tech
BETTER_AUTH_SECRET=            # openssl rand -base64 32
STRIPE_SECRET_KEY=             # Stripe Dashboard
STRIPE_WEBHOOK_SECRET=         # stripe listen --forward-to localhost:3000/api/stripe/webhook
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
OPENAI_API_KEY=                # OpenAI Platform
RESEND_API_KEY=                # Resend Dashboard
GITHUB_CLIENT_ID=              # (optional) GitHub OAuth
GITHUB_CLIENT_SECRET=          # (optional)
```

Full list in [`.env.example`](.env.example).

## Customize

**Branding** — Edit `src/config/site.ts`. Name, emails, social links in one file.

**Colors** — Edit `src/app/globals.css`. OKLCH variables. See `DESIGN.md`.

**AI model** — Edit `src/lib/ai.ts`. Any Vercel AI SDK provider.

**Add language** — `src/i18n/config.ts` → `src/i18n/messages/` → `src/content/blog/`.

## Deploy

```bash
# Vercel (recommended)
# 1. Push to GitHub
# 2. Import in Vercel → vercel.com/new
# 3. Add env vars
# 4. Deploy

# Stripe Webhook (production)
# Dashboard → Webhooks → https://yourdomain.com/api/stripe/webhook
# Events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted
```

## Commands

```bash
npm run dev            # dev server
npm run build          # production build
npm run lint           # lint check
npm run db:push        # push schema
npm run db:studio      # Drizzle Studio
```

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md).

## AI 编程出海训练营

From the **[AI 编程出海训练营](https://chuhai.fyyd.net/)** (AI Coding Bootcamp for Global Markets).

Website: https://chuhai.fyyd.net/ · WeChat: 257735

## License

[MIT](LICENSE)
反馈内容错误

看看同类模板

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