前端全栈进阶 Nextjs打造跨框架SaaS应用
Nextjs + Tailwind + Trpc + DrizzleORM + Serverless, 从构思到部署 ,助你完成开发者到服务提供者的蜕变
快速晋级“高薪”前端工程师,你准备好了吗?本课程将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术,亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署,再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能,助力你实现从开发者到服务提供者的进阶!成为行业急需的高薪人才!
适合人群
期望提升全栈能力、突破职场壁垒的开发者
技术储备
了解React基础 (如果有丰富的其他框架开发经验也可)
了解 Node js基础
熟悉数据库基本操作
环境参数
next 14.1.0
react ^18
drizzle-orm ^0.29.1
react-dom ^18
tailwindcss ^3.3.0
@trpc/client 11
@trpc/react-query 11
@trpc/server 11
@tanstack/react-query ^5.17.0
@uppy/core ^3.8.0
目录大纲:
第1章 课程介绍
4 节|37分钟
-
视频:1-1 快速晋级“高薪”前端工程师,你准备好了吗?试看09:51
-
视频:1-2 为什么选择这个课题?因为全栈是前端的未来09:28
-
视频:1-3 一个能完整展现全栈技术的SaaS项目08:52
-
视频:1-4 实例调研,看看真实运行着的Saas系统08:14
第2章 项目和技术介绍
9 节|89分钟
-
视频: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分钟
-
视频: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,无需重复声明的schema13:46
-
视频:3-15 Trpc引入,全栈typesafe是怎么做到的25:16
-
视频:3-16 TRPC context如何帮助我们管理服务18:46
-
视频:3-17 TRPC在client端的集成26:01
第4章 核心业务文件上传功能实现
10 节|124分钟
-
视频: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上传文件到COS18: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 无限滚动翻页,全栈角度带你看清实现细节-part227: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 更好得管理文件,让用户可以创建多个APP11: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 节|117分钟
-
视频: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 在页面上发请求,修改cors09:01
-
视频:7-8 客户端请求如何保证安全?signed token帮你解决21:07
-
图文:7-9 【动手实践】将create presigned url改成使用sdk
第8章 通用组件开发
9 节|135分钟
-
视频:8-1 preact介绍,为什么preact很适合共享类组件06:26
-
视频:8-2 创建一个最基础的upload button组件17:12
-
视频:8-3 在vue里面使用preact组件?太神奇了吧!一个函数帮你解决.mp421: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项目样式,完成一个像样地demo22:27
-
图文:8-9 【动手实践】尝试把组件集成到其他技术栈的项目中
第9章 优化功能
内容更新中
第10章 服务收费
内容更新中
第11章 项目部署
内容更新中
本课程持续更新中
声明:本站所有资料均来源于网络以及用户发布,如对资源有争议请联系微信客服我们可以安排下架!