前端全栈进阶 Nextjs打造跨框架SaaS应用(完结)

前端全栈进阶 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

试看链接：https://pan.baidu.com/s/1w5br-7Zm-x68fcAXxOVO4Q?pwd=fk85


目录大纲：

第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，无需重复声明的schema

13:46

视频：

3-15 Trpc引入，全栈typesafe是怎么做到的

25:16

视频：

3-16 TRPC context如何帮助我们管理服务

18:46

视频：

3-17 TRPC在client端的集成

26:01

第4章 核心业务文件上传功能实现

10 节｜124分钟

展开

第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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

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分钟

收起

视频：

11-1 各种计算服务的区别和选择

14:42

视频：

11-2 各种数据库提供商的选择

07:59

视频：

11-3 Neon云数据库介绍以及集成

10:52

视频：

11-4 Vercel介绍及其Devops体验

13:33

视频：

11-5 完成Vercel部署

13:23

本课程已完结

挺好的

我的双手也许真的可以改变这个世界！

hhhhhhh-

我所碰到的最好的客服，没有之一！

站长你终于把这门课出来！

挺好的

落霞与咕噜起飞秋水共长天一色

666

物超所值