资源介绍
视频数量：16个
总时长：2小时27分
课程介绍：
用Next.js打造美容沙龙预约应用
你有没有过这样的经历：想找个时间去美容院做个护理，翻了半天微信找不到联系方式，打电话过去不是占线就是已经被约满了，最后只好放弃？
如果你是开发人员，看到这种场景，第一反应大概就是——这事儿完全可以用一个App解决。顾客在线选套餐、看时间段、预约下单，店家那边统一管理服务项目、处理预约订单，整个流程清清楚楚。问题在于，从零开始搭一个这样的系统，涉及前端、后端、数据库、用户认证、权限管理，听起来就不是一个人能在短期内搞定的事。
这门课做的事情，就是带你用尽可能短的路径，把一个完整的美容沙龙预约系统从零搭起来。全程用Next.js这个目前最火的全栈React框架，配合Supabase做后端服务和数据库，再加上shadcn这套组件库来搞定UI。两个小时多一点的时间，十六个视频，一步一步把整个项目走通。
一、项目搭建与基础环境配置
课程的第一步是把开发环境搭起来。讲师会带你用最新版的create-next-app命令创建Next.js项目，这里有一个细节值得注意：课程用的是Next.js 16，这是目前最新的版本，会涉及到一些新特性，比如agents.md配置文件的引入，这个文件用来指导AI编码代理写出符合最新规范的代码，算是比较前沿的开发实践。
创建项目的时候，会让你做一系列选择：TypeScript要不要用、ESLint要不要开、Tailwind CSS配不配、App Router用不用、代码放在src目录里还是外面，这些选择都有它的道理，讲师会逐一帮你解释。配完之后接着把shadcn引入进来。shadcn跟传统组件库不太一样，不是让你装一个npm包然后到处import，而是把组件源码直接复制到你的项目目录里，你可以随时改样式、删功能，完全掌控。
二、用户认证体系
系统搭起来之后，紧接着要解决用户身份的问题。美容院预约系统至少有两类用户：普通顾客要注册登录、浏览套餐、预约服务；店家管理员要管理套餐、处理预约。两类用户走不同的界面，看到不同的功能。
课程里用Supabase来搞定认证这块。Supabase本质上是一个开源的Firebase替代品，提供现成的用户注册、登录、密码管理这些功能，还有PostgreSQL数据库、文件存储、实时订阅等能力。讲师会带你创建Supabase项目、拿到API密钥、集成到Next.js应用里，然后实现完整的注册和登录流程。
这一部分会讲到注册页面的UI设计、输入校验、错误信息展示这些细节，还有登录时如何保持会话状态、如何在服务端做权限校验。讲得比较细，不是那种只演示成功路径的教程。
三、管理后台布局
登录成功之后，管理员会进入一个私有的管理后台。这个后台需要一个统一的布局，包含侧边栏导航、顶部菜单栏、用户头像下拉菜单这些常见元素。课程会带着你搭建一个layout骨架，然后填充具体的菜单项。
菜单项怎么设计、图标怎么选、激活状态怎么高亮、收起展开怎么切换，这些看似琐碎但又很影响使用体验的地方，讲师都会带你过一遍。因为shadcn本身就提供了很多现成组件，比如Sheet、DropdownMenu、Avatar这些，所以搭起来不会太费劲。
四、套餐管理模块
接下来是整个系统的核心功能之一：套餐管理。所谓套餐，就是美容院提供的具体服务项目，比如深层清洁护理、全身精油按摩之类的。每个套餐有名称、价格、描述、可预约时间段这些字段。
课程会带你用Supabase建表，定义好字段类型，名称是文本、价格是浮点数、描述是文本、时间段是整数数组，因为套餐可能有多个时段可选。表建好之后，接下来就是完整的增删改查操作：新增套餐、列出套餐、编辑套餐、删除套餐。
UI层面，会教你封装一个可复用的PageTitle组件，因为每个管理页面都需要标题和操作按钮。如果每个页面都重复写一遍样式就太啰嗦了，封装好之后，新增、列表、编辑三个页面都可以共用这个组件，代码干净利落，看起来也专业。
五、用户端预约流程
管理端功能搞定之后，就该切换到用户视角了。普通顾客登录之后看到的是一个完全不同的界面，没有管理菜单，取而代之的是各种套餐的展示卡片。
用户可以浏览套餐、查看详情、选择时间段、提交预约。这个过程涉及到几个关键点：套餐数据如何从数据库读取并展示到页面上，如何让用户选择具体的预约时间，提交预约之后如何写入数据库，用户怎么查看自己已经预约的订单。课程会一步步把这些环节串起来，每一个视频都很短，平均不到十分钟，但信息密度不低。
六、学完之后你能拿到什么
跟着这门课做完，你手里会多出一个可以真正运行的美容沙龙预约系统。不是玩具demo，而是有完整用户注册登录、管理员后台、套餐管理、用户预约功能的全栈应用。代码结构清晰，用的是目前主流的技术栈，包括Next.js 16、TypeScript、Tailwind CSS、shadcn、Supabase，这些都是现在找工作很加分的技能点。
更重要的是，这门课的教学逻辑是先搭骨架再填肉，每一步都有明确的产出。学完之后你不只是会复制粘贴代码，而是真正理解了Next.js全栈应用是怎么运转的，Supabase是怎么跟Next.js配合的，shadcn组件库该怎么用。以后遇到类似的项目，比如做个餐厅预约、健身课程报名、活动报名之类的，你都能照着这个套路来。
这门课适合有一定React基础、想要进阶到全栈开发的前端工程师。也适合想快速验证产品想法的独立开发者，你不需要从零设计架构，跟着课程走就能拿到一个可用的原型，在此基础上继续迭代就行。如果你正在准备作品集，这套项目也是很好的展示素材，代码量适中，功能完整，放在简历上很有说服力。