
├── 前端全栈进阶 Nextjs打造跨框架SaaS应用
├── 第1章 课程介绍
│ ├── 1-1 快速晋级“高薪”前端工程师,你准备好了吗?
│ ├── 1-2 为什么选择这个课题?因为全栈是前端的未来
│ ├── 1-3 一个能完整展现全栈技术的SaaS项目
│ └── 1-4 实例调研,看看真实运行着的Saas系统
├── 第2章 项目和技术介绍
│ ├── 2-1 课程项目展示,通过这个项目你能学到什么?
│ ├── 2-2 前端全栈技术选型梗概,你有哪些选择?
│ ├── 2-3 Nextjs核心亮点技术剖析,为什么Nextjs能有这么多的使用量?
│ ├── 2-4 新时代的Nextjs技术体验
│ ├── 2-5 Saas的一大特征,第三方集成我们如何实现?
│ ├── 2-6 为什么要考虑跨框架组件开发?我们有哪些选择
│ └── 2-7 样式方案选择,为什么Tailwind会是最后的赢家?
├── 第3章 创建项目搭建基础设施
│ ├── 3-1 通过create next app命令来创建项目
│ ├── 3-2 Shadcn ui + radix primitives,如何打造超强用户体验的组件
│ ├── 3-3 第一个页面,创建App,如何利用TW的生态快速搭建
│ ├── 3-4 通过docker安装数据库,更轻松搭建本地开发环境
│ ├── 3-5 Why drizzle, Node ORM生态介绍
│ ├── 3-8 Auth是个麻烦的事情,next auth帮我们解决问题
│ ├── 3-12 如何在Nextjs中实现API
│ ├── 3-13 保证安全!用zod来做API校验
│ ├── 3-15 Trpc引入,全栈typesafe是怎么做到的
│ └── …
├── 第4章 核心业务文件上传功能实现
│ ├── 4-1 什么是云存储?AWS S3服务体验学习
│ ├── 4-2 AWS不好申请?用腾讯云COS代替
│ ├── 4-3 上传也是个麻烦事,Uppy如何帮我们解决核心逻辑?
│ ├── 4-4 让我们开发一个基础的文件上传组件
│ ├── 4-5 如何安全地在客户端上传文件到云服务?presigned url上传文件到COS
│ └── …
├── 第5章 图片上传dashboard优化
│ ├── 5-1 美化上传按钮,符合我们的调性
│ ├── 5-2 引入dialog,用于上传前预览文件信息
│ ├── 5-3 提升用户体验,让用户在上传前预览文件
│ ├── 5-7 无限滚动翻页,全栈角度带你看清实现细节
│ ├── 5-12 图片访问优化功能,让你的图片可以定制并且快速访问
│ └── …
├── 第6章 文件管理功能实现
│ ├── 6-1 功能讲解和界面设计
│ ├── 6-2 nextjs parallel routes实现导航和内容分离
│ ├── 6-3 如何确保只有当前用户能看到自己上传的文件
│ ├── 6-5 创建个表单还要写API?server action帮你轻松搞定
│ ├── 6-10 新建云存储,react-hook-form表单校验做起来
│ └── …
├── 第7章 成为Saas,开放给第三方服务
│ ├── 7-1 我们可以为外界提供什么样的服务?
│ ├── 7-2 第三方服务接入,生成API Key作于校验
│ ├── 7-5 如何用pnpm mono repo来管理对外发布的package?
│ ├── 7-8 客户端请求如何保证安全?signed token帮你解决
│ └── …
├── 第8章 通用组件开发
│ ├── 8-1 preact介绍,为什么preact很适合共享类组件
│ ├── 8-2 创建一个最基础的upload button组件
│ ├── 8-4 上传业务逻辑接入,uppy封装
│ ├── 8-5 把uppy和组件整合在一起,完成upload button组件
│ └── …
├── 第9章 优化功能
│ ├── 9-1 打开一个不存在的app怎么处理?
│ ├── 9-2 跳转登录之后回跳到dashboard页面
│ ├── 9-3 暗黑色调主题切换
│ └── …
├── 第10章 服务收费
│ ├── 10-1 思考,一个合格的Saas是如何收费
│ ├── 10-2 为用户增加plan字段
│ ├── 10-6 Stripe介绍以及为什么选择Stripe
│ ├── 10-7 接入Stripe来升级用户的plan
│ └── …
├── 第11章 项目部署
│ ├── 11-1 各种计算服务的区别和选择
│ ├── 11-2 各种数据库提供商的选择
│ ├── 11-3 Neon云数据库介绍以及集成
│ └── 11-5 完成Vercel部署
├── 课程源码