首页 实战

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

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

难度：中级
|
时长：共 22 小时 30 分钟
新课榜第 1 名
￥269.00
￥299.00
上新特惠
距离活动结束
立即购买
加购物车
  • 多维度提升全栈设计开发能力
  • 解锁跨框架组件开发核心技能
  • 落地Saas开发&维护核心技能
  • 具备Saas应用全流程实战经验
  • 实践高性能Serverless部署
  • 提升架构设计稳定和可拓展性
试看本节课 09:51
试看本节课 16:01
试看本节课 19:32
1-1 快速晋级“高薪”前端工程师，你准备好了吗？
2-4 新时代的Nextjs技术体验
3-12 如何在Nextjs中实现API

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
快速晋级“高薪”前端工程师，你准备好了吗？本课程将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术，亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署，再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能，助力你实现从开发者到服务提供者的进阶！成为行业急需的高薪人才！
展开所有
第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分钟
展开
  • 视频：
    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 节｜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 在页面上发请求，修改cors
    09: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组件？太神奇了吧！一个函数帮你解决.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章 优化功能
内容更新中
第10章 服务收费
内容更新中
第11章 项目部署
内容更新中
本课程持续更新中
适合人群
期望提升全栈能力、突破职场壁垒的开发者
技术储备
了解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
Jokcy
前端架构师， 已有97355个学生
其他课程： 《Vite 从入门到精通，玩转新时代前端构建法则》 《HTTP协议原理+实践 完整案例解析主流技术》、 《React源码深度解析 高级前端工程师必备技能》、
全部
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18+Next+Nest 全栈进阶
套餐价格：¥1,146.00
2门课 总价：¥1,298.00
立即购买
 课程介绍

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

中级  · 52人报名 ¥299.00
课程介绍 

2024版，React18+ Nest.js 全栈开发仿问卷星项目

中级  · 306人报名 ¥999.00
深入学习React18
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

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

中级  · 52人报名 ¥299.00
课程介绍 

前端跳槽突围课，React18底层源码深入剖析

高级  · 35人报名 ¥399.00
React18从入门到全栈
套餐价格：¥539.00
2门课 总价：¥598.00
立即购买
 课程介绍

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

中级  · 52人报名 ¥299.00
课程介绍 

React18 系统入门 进阶实战《欢乐购》

中级  · 281人报名 ¥299.00
查看更多
数据加载中...
查看更多好课
《前端全栈进阶 Nextjs打造跨框架SaaS应用》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
上新特惠
￥269.00
￥299.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信