如果你还在用 React + Express + MongoDB 的老三样，那你真的落后了。Next.js + Supabase + Shadcn UI 的组合，能让你的 SaaS 项目起飞。
这是个关于现代开发体验（DX）的实验。
我最近在重构一个 SaaS 模板，目标是让开发过程变得更简单、更快速、更专注。
我选择了 Next.js 作为前端框架，因为它提供了服务端渲染、静态生成、API 路由等特性，同时又保持了 React 的灵活性。
NextDevKit 这个模板技术栈，其实是个非常聪明的设计。它把 Next.js 的能力封装成一套可复用的组件和结构，让开发者可以像搭乐高一样构建自己的项目。
说实话，我一开始有点担心，这种“模板化”的方式会不会让项目变得臃肿？但用了一段时间之后，我发现它反而让事情变得更简单。
Next.js 的 API 路由让我可以快速搭建后端服务，而 Supabase 则提供了无服务器的数据库和认证服务，完全不需要写任何后端代码。
而且，我还在项目中用了 Shadcn UI，这玩意儿简直是React 组件界的瑞士军刀。它的组件不仅漂亮，而且高度可定制，完全符合我的设计需求。
现在我来分享一下我的开发流程。
首先，我用 NextDevKit 模板快速生成了一个基础项目结构。
npx create-next-app@latest my-saas
cd my-saas
npm install supabase shadcn-ui
然后，我直接在 pages/api 目录下写了一个简单的 API 路由，用来处理用户登录和注册。
// pages/api/auth.js
export default function handler(req, res) {
if (req.method === 'POST') {
// 处理登录逻辑
res.status(200).json({ message: '登录成功' });
} else if (req.method === 'GET') {
// 查询用户数据
res.status(200).json({ users: [] });
}
}
接着，我通过 Supabase 的客户端 SDK 来连接数据库，这个 SDK 非常轻量，而且支持 TypeScript，这让我的开发体验提升了不少。
// lib/supabase.js
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_ANON_KEY
);
然后，我用 Shadcn UI 的组件来构建前端页面。它支持 TailwindCSS，而且组件之间几乎可以无缝拼接。
// components/Navbar.tsx
import { Button } from '@shadcn/ui';
export default function Navbar() {
return (
<nav>
<Button>登录</Button>
</nav>
);
}
我甚至不需要写太多逻辑，因为 Shadcn UI 已经提供了很多常用的交互组件，比如表单、按钮、模态框等等。
另外，我还用到了 TailwindCSS，它让前端样式变得超级简单。你只需要在组件里写类名，不用写任何 CSS 文件。
// components/ProfileCard.tsx
<div className="bg-white rounded-lg shadow-md p-4">
<h2 className="text-xl font-bold">用户资料</h2>
<p className="text-gray-600">欢迎回来，用户</p>
</div>
整个开发过程下来，我只用了不到 10 分钟，就完成了前端页面、后端 API、数据库连接三大核心模块。
你可能会问，这是不是太简单了？
老实说，是的。但这正是现代开发的魅力所在：我们不再需要从零开始构建每一个功能，而是可以复用、组合、快速迭代。
当然，我也踩过一些坑。比如，刚开始时我对 Next.js 的 API 路由 和 Supabase 的客户端 SDK 不太熟悉，导致项目结构有点混乱。
但通过查阅文档和调试，我很快找到了解决方案。而且，这些工具的社区支持非常强大，GitHub 上的 Issues 和 PRs 会让你觉得不是在自己一个人战斗。
如果你也想试试这种开发方式，我建议你从 NextDevKit 模板开始。它提供了完整的项目结构、配置文件、依赖项，甚至还有预设的 UI 组件。
这真的是一种新的开发范式，是Vibe Coding的真正体现。
你是否愿意尝试这种开发方式？或者你有其他更喜欢的工具组合？
Next.js, Supabase, Shadcn UI, TailwindCSS, API 路由, 无服务器架构, DX, 代码复用, 快速迭代, 现代前端