资源介绍
视频数量：35个
总时长：5小时52分
课程介绍：
Next.js 现代技术栈：工具链与AI开发实践
你有没有这种感觉？学了一堆新技术，却不知道在实际项目中怎么把它们组合起来用。每次新建项目都要纠结半天用什么工具、怎么组织代码结构，好不容易写出来的代码过段时间自己都看不懂了。如果你也有这样的困惑，那这门课就是为你准备的。
这门课会带你从零开始搭建一个完整的现代化开发环境，手把手教你配置各种高效工具，最后还用这套工具链开发了一个复古终端风格的笔记应用。整个过程不走弯路，不讲废话，全是实打实的工程经验。
先说说项目初始化这部分。很多人一上来就直接写代码，结果项目结构乱七八糟，后面维护起来苦不堪言。这门课会先教你怎么用Turborepo创建一个规范的多包管理架构，把前端、后端、共享代码分开管理，但又能统一构建和运行。前端用Next.js，后端用Nest.js，两个项目放在同一个workspace里，用一行命令就能同时启动。同时还会配置Git Hooks，用Lefthook在每次提交代码前自动检查格式和语法，避免把乱七八糟的代码推送到仓库里。
代码质量工具这块用的是Biome，这是一个新兴的代码格式化和检查工具，比ESLint配置简单得多，运行速度也快得多。课程会教你配置Biome，让它在保存文件时自动修复格式问题，确保团队里每个人写出来的代码风格都一致。不管是你自己写的还是AI生成的代码，都能保持整洁规范。
后端部分用的是Nest.js配合Prisma和PostgreSQL。Nest.js是一个结构化的Node.js框架，用TypeScript开发，有清晰的模块划分，很适合做企业级后端服务。Prisma是一个现代化的ORM工具，能让你用TypeScript语法操作数据库，不用写那些冗长的SQL语句。课程会演示怎么设计数据库模型、创建种子数据、搭建RESTful API接口。数据库用的是Neon提供的云端PostgreSQL，开箱即用，不用自己搭数据库服务器。
前后端联调这部分很有技术含量。我们会用Swagger给API接口生成在线文档，方便前后端沟通接口规范。然后用Orval这个工具，根据Swagger文档自动生成TypeScript类型定义、API调用函数和React Hooks。这样前端调用后端接口时就有完整的类型提示，写错了IDE会直接报错，而不是等到运行时才发现问题。
状态管理在现代前端开发里非常重要。这门课会教你用TanStack Query来处理服务端状态，它自带缓存、轮询、错误重试等功能，比自己写useEffect去请求API省心多了。还会用到Nuqs这个库，它能把应用状态同步到URL参数里，这样刷新页面状态不会丢失，分享链接也能带上当前状态。用Classnames来优雅地处理动态CSS类名，比字符串拼接清晰得多。
实战部分会带你开发一个终端风格的笔记应用。界面模拟老式命令行终端，有多列布局、文件夹导航、笔记列表和详情页。实现嵌套文件夹结构，点击文件夹能展开显示子文件夹和笔记。笔记数据通过API从后端获取，支持查看笔记详情。这个应用虽然功能不复杂，但涉及了前端、后端、数据库、API调用、状态管理等各个环节，是很好的全栈练习项目。
最后还会教你把AI引入开发流程。课程会演示怎么用Claude AI辅助编程，让AI帮你写代码、解释代码、debug。你会发现合理使用AI能大大提升开发效率，特别是写一些重复性的代码和文档注释。
学完这门课你会收获什么？你会掌握一套完整的现代化前端技术栈，知道如何搭建规范的项目结构，熟练使用各种提效工具，能独立开发全栈应用。更重要的是，你学到的这些经验可以直接应用到自己的项目里，不用再从零踩坑。
这门课适合有JavaScript和TypeScript基础，想提升工程化能力的前端开发者。如果你对现代前端工具链感兴趣，或者想了解怎么在实际项目中使用AI辅助开发，这门课会很适合你。课程内容非常实用，没有理论堆砌，全是工程实践中的干货。