前端全栈进阶 Nextjs打造跨框架SaaS应用

Nextjs + Tailwind + Trpc + DrizzleORM + Serverless， 从构思到部署 ，助你完成开发者到服务提供者的蜕变

第1章 课程介绍 试看4 节 | 37分钟
本章是介绍章，主要介绍课程中会学习的内容，以及课程中你会学习到的技术，同时会带同学们整体过一下课程实现的项目，让同学们对于课程整体有一个概念。

收起列表
视频：
1-1 快速晋级“高薪”前端工程师，你准备好了吗？ (09:51)
试看
视频：
1-2 为什么选择这个课题？因为全栈是前端的未来 (09:28)
视频：
1-3 一个能完整展现全栈技术的SaaS项目 (08:52)
视频：
1-4 实例调研，看看真实运行着的Saas系统 (08:14)
第2章 项目和技术介绍9 节 | 89分钟
本章介绍项目中用到的核心技术Nextjs，每一节对应不同的技术点，意在帮助同学们快速了解课程中用到的不同的技术，即便你之前没有接触过，学习完本章课程也会获得一定的了解，便于在后面实战环节快速上手。

收起列表
视频：
2-1 课程项目展示，通过这个项目你能学到什么？ (10:42)
视频：
2-2 前端全栈技术选型梗概，你有哪些选择？ (10:59)
视频：
2-3 Nextjs核心亮点技术剖析，为什么Nextjs能有这么多的使用量？ (14:07)
视频：
2-4 新时代的Nextjs技术体验 (16:01)
试看
视频：
2-5 Saas的一大特征，第三方集成我们如何实现？ (05:13)
视频：
2-6 为什么要考虑跨框架组件开发？我们有哪些选择 (09:28)
视频：
2-7 样式方案选择，为什么Tailwind会是最后的赢家？ (14:39)
视频：
2-8 其他技术选型梗概 (06:55)
图文：
2-9 【知识图解】开发环境搭建
第3章 创建项目搭建基础设施17 节 | 263分钟
本章开始会带同学们创建项目以及集成项目中使用的各种不同的技术，包括Tailwind，shadcn，drizzle orm，next-auth，trpc等，同时会教同学们如何在本地进行数据库调试连接等。本章主要目的就是完成项目纯技术方面的建设，为后续项目业务开发打好基础。…

收起列表
视频：
3-1 通过create next app命令来创建项目 (05:00)
视频：
3-2 Shadcn ui + radix primitives，如何打造超强用户体验的组件 (18:47)
视频：
3-3 第一个页面，创建App，如何利用TW的生态快速搭建 (09:00)
视频：
3-4 通过docker安装数据库 ，更轻松搭建本地开发环境 (08:00)
视频：
3-5 Why drizzle, Node ORM生态介绍（上） (12:12)
视频：
3-6 Why drizzle, Node ORM生态介绍（下） (10:46)
视频：
3-7 如何通过drizzle orm连接数据库？ (20:23)
视频：
3-8 Auth是个麻烦的事情，next auth帮我们解决问题 (12:32)
视频：
3-9 账号密码不安全？把gitlab ouath并集成到next auth（上） (13:37)
视频：
3-10 账号密码不安全？把gitlab ouath并集成到next auth（下） (12:03)
视频：
3-11 如何通过next auth保护你的特定路由？ (20:22)
视频：
3-12 如何在Nextjs中实现API (19:32)
试看
视频：
3-13 保证安全!用zod来做API校验 (16:44)
视频：
3-14 zod+drizzle，无需重复声明的schema (13:46)
视频：
3-15 Trpc引入，全栈typesafe是怎么做到的 (25:16)
视频：
3-16 TRPC context如何帮助我们管理服务 (18:46)
视频：
3-17 TRPC在client端的集成 (26:01)
第4章 核心业务文件上传功能实现10 节 | 124分钟
本章主要讲解项目中集成上传服务的开发，本章我们会以亚马逊云服务S3接口作为切入点，因为基本上所有的云服务商都有兼容S3服务的API，在这章中我们会学习如何开发客户端的上传组件，以及上传使用的API和最终云服务的集成。…

收起列表
视频：
4-1 什么是云存储？AWS S3服务体验学习 (17:47)
视频：
4-2 AWS不好申请？用腾讯云COS代替 (08:39)
视频：
4-3 上传也是个麻烦事，Uppy如何帮我们解决核心逻辑？ (13:19)
视频：
4-4 让我们开发一个基础的文件上传组件 (15:03)
视频：
4-5 如何安全地在客户端上传文件到云服务？presigned url上传文件到COS (18:57)
视频：
4-6 上传的图片数据如何存储到数据库 (13:00)
视频：
4-7 图片列表功能实现，直接预览内容 (14:07)
视频：
4-8 上传变得更cool，如何通过拖拽来选择要上传的文件？ (16:05)
视频：
4-9 更cool，如何通过复制粘贴来选择要上传的文件？ (07:03)
图文：
4-10 【动手实践】学习aws sdk使用，修改presigned url生成参数看效果
第5章 图片上传dashboard优化13 节 | 177分钟
本章主要着重于优化课程项目的管理界面，在完成了核心的文件上传功能之后，我们把相关的功能都一一添加，让整个项目看上去更像一个真实的网站。并且通过这一章的学习，我们能更好地巩固全栈技术栈地使用。

收起列表
视频：
5-1 美化上传按钮，符合我们的调性 (05:25)
视频：
5-2 引入dialog，用于上传前预览文件信息 (10:16)
视频：
5-3 提升用户体验，让用户在上传前预览文件 (14:45)
视频：
5-4 乐观UI的强大，上传完成实时更新图片列表 (14:06)
视频：
5-5 停一停，整理一下代码 (13:51)
视频：
5-6 提取预览文件组件 (12:04)
视频：
5-7 无限滚动翻页，全栈角度带你看清实现细节-part2 (27:50)
视频：
5-8 API支持后，如何在客户端实现无限滚动 (20:25)
视频：
5-9 支持不同的排序规则 (13:43)
视频：
5-10 针对单个图片的操作 (19:22)
视频：
5-11 优化操作反馈 (05:17)
视频：
5-12 图片访问优化功能，让你的图片可以定制并且快速访问 (19:16)
图文：
5-13 【动手实践】支持查看被删除的图片
第6章 文件管理功能实现11 节 | 157分钟
本章主要讲解图片管理功能的开发，上传只是最基础的功能，上传之后的管理才是更加复杂的部分，本章会涉及到文件目录管理，文件管理，权限管理等功能的开发。

收起列表
视频：
6-1 功能讲解和界面设计 (03:37)
视频：
6-2 nextjs parallel routes实现导航和内容分离 (15:33)
视频：
6-3 如何确保只有当前用户能看到自己上传的文件 (07:14)
视频：
6-4 更好得管理文件，让用户可以创建多个APP (11:20)
视频：
6-5 创建个表单还要写API？server action帮你轻松搞定 (13:03)
视频：
6-6 如何处理server action报错的情况？ (12:47)
视频：
6-7 点创建就要跳转页面？intercepting routes实现路由插入，帮你解决问题 (17:11)
视频：
6-8 既然创建了这么多app，那么我们来切换一下吧 (12:57)
视频：
6-9 用户需要管理自己得云存储，给他这个机会 (20:18)
视频：
6-10 新建云存储，react-hook-form表单校验做起来（上） (21:57)
视频：
6-11 新建云存储，react-hook-form表单校验做起来（下） (20:29)
第7章 成为Saas，开放给第三方服务9 节 | 116分钟
本章主要讲解把上述我们已经实现的服务，封装成第三方可以轻松接入的功能，Saas服务的一大特点就是第三方集成，通过创建App，以及发布npm包的方式，我们把服务编程非常简单的集成方式开放给用户。

收起列表
视频：
7-1 我们可以为外界提供什么样的服务？ (03:02)
视频：
7-2 第三方服务接入，生成API Key作于校验 (28:25)
视频：
7-3 通过请求的API Key header来创建进行权限校验 (11:55)
视频：
7-4 如何使用生成的API Key？让我们创建一个nuxt项目来试一试 (22:04)
视频：
7-5 如何用pnpm mono repo来管理对外发布的package？ (12:20)
视频：
7-6 在nuxt项目中集成api包 (08:17)
视频：
7-7 在页面上发请求，修改cors (07:55)
视频：
7-8 客户端请求如何保证安全？signed token帮你解决 (21:07)
图文：
7-9 【动手实践】将create presigned url改成使用sdk
第8章 通用组件开发9 节 | 135分钟
本章主要在上一章地基础上，基于开放的SDK进行业务逐渐的封装。本章的亮点在于我们封装的组件需要开放给第三方网站使用，我们需要解决组件和不同框架的适配问题，我们基于preact开发组件，并创建了vue的connect工具方法让组件同样可以在vue中使用。…

收起列表
视频：
8-1 preact介绍，为什么preact很适合共享类组件 (06:26)
视频：
8-2 创建一个最基础的upload button组件 (17:12)
视频：
8-3 在vue里面使用preact组件？太神奇了吧！一个函数帮你解决.mp4 (21:23)
视频：
8-4 上传业务逻辑接入，uppy封装 (17:36)
视频：
8-5 把uppy和组件整合在一起，完成upload button组件 (13:24)
视频：
8-6 再来一个dropzone组件练练手 (10:42)
视频：
8-7 把dropzone组件也集成到nuxt项目中 (25:34)
视频：
8-8 优化nuxt项目样式，完成一个像样地demo (22:27)
图文：
8-9 【动手实践】尝试把组件集成到其他技术栈的项目中
第9章 优化功能9 节 | 94分钟
本章主要优化之前已经开发好的功能，之前开发的功能只关注于happy path的实现，很多异常情况并没有得到很好的处理，本章会逐一把这些问题优化，让项目变得更加完善。

收起列表
视频：
9-1 打开一个不存在的app怎么处理？ (10:45)
视频：
9-2 跳转登录之后回跳到dashboard页面 (03:58)
视频：
9-3 暗黑色调主题切换 (11:07)
视频：
9-4 优化dashboard排版，看起来更专业 (07:26)
视频：
9-5 配置页面导航优化，增加返回按钮 (10:45)
视频：
9-6 storage新增按钮完善 (01:28)
视频：
9-7 配置页面样式优化 (20:37)
视频：
9-8 让我们来定制一张图片的不同尺寸旋转 (27:36)
图文：
9-9 【动手实践】没有上传文件时显示一个无文件提醒
第10章 服务收费9 节 | 94分钟
本章介绍SaaS项目如何进行收费，首先我们会制定项目的收费标准，并在代码中实现该标准以控制用户的权限，最后我们会集成Stripe这个在国际上非常流行的收费工具，来实现网站的收款。

收起列表
视频：
10-1 思考，一个合格的Saas是如何收费 (08:08)
视频：
10-2 为用户增加plan字段 (11:33)
视频：
10-3 限制免费用户的可上传文件数量 (14:03)
视频：
10-4 想白嫖？plan升级弹框安排上 (11:16)
视频：
10-5 限制免费用户可以创建的app数量 (06:30)
视频：
10-6 Stripe介绍以及为什么选择Stripe (05:11)
视频：
10-7 接入Stripe来升级用户的plan (05:20)
视频：
10-8 检测用户付款结果来完成订单 (18:02)
视频：
10-9 完成订单操作回调页面 (13:40)
第11章 项目部署5 节 | 61分钟
本章主要讲解如何把我们的项目部署上线，我们需要解决项目代码部署，线上数据库连接等问题，我们会选用vercel + neon来进行线上部署，实现零成本上云。

收起列表
视频：
11-1 各种计算服务的区别和选择 (14:42)
视频：
11-2 各种数据库提供商的选择 (07:59)
视频：
11-3 Neon云数据库介绍以及集成 (10:52)
视频：
11-4 Vercel介绍及其Devops体验 (13:33)
视频：
11-5 完成Vercel部署 (13:23)
本课程已完结