认识 Next.js

该系列的第一场研讨会涵盖了 Next.js 工作的重要部分。

但与其再构建一个待办事项应用，不如构建一个功能齐全的类似 ChatGPT 的应用。以下是涵盖的内容：

• 项目设置与部署： 配置一个使用 TypeScript、ESLint 和 Tailwind CSS 的 Next.js 应用程序，并将其持续部署到 Vercel。
• 路由与布局： 使用 App Router 创建应用程序路由和布局，这些布局将告知数据获取和导航。
• 用户认证： 实现用户认证和会话管理。
• 实时流式 AI 响应： 构建一个动态聊天应用程序，连接到 OpenAI 的 API 并实时流式传输响应。
• 数据库集成： 将聊天数据存储在 Vercel Postgres 数据库中。

样式化 Next.js 应用程序

随着 Web 应用程序样式的进步，App Router 和 React Server Components 的引入也带来了新的挑战。客户端组件、上下文问题和响应式设计的需要都成为焦点。

在这个工作坊模块中，你将了解 Next.js 中构建响应式、主题化 UI 的流行选项。你将练习：

• CSS 模块化： 一种经典（但有时繁琐）的组件样式化方式。
• Tailwind CSS： 实用类方法越来越受欢迎，但需要一些配置步骤和策略来保持可读性。
• StyleX：Meta 的 StyleX 库提供了一种对组件、设计符号和主题进行精细控制的方法。
• Pixel CSS: Material UI 是一个流行的组件库，但它与 React Server Components 不兼容。为此，团队创建了 Pixel CSS，它在保持样式组织的同时提高了性能。
• Emotion: 虽然这不是最现代的方法，但许多应用程序仍然使用 Emotion 进行样式设置。学习如何配置该库以支持 App Router 应用程序。

项目基础设施

有各种各样的工具、框架和流程支持现代 Next.js 应用程序——尤其是在作为团队一部分工作时。本工作坊模块分享了一些建议和最佳实践，用于为您的项目基础设施构建一个坚实的基础。以下是详细内容：

• 代码风格与一致性： 使用 ESLint 和 Prettier 等工具来强制执行团队的风格指南。
• 组件组织： 学习权衡不同项目组织策略的利弊，以促进可重用性和更便捷的导航。
• 构建组件库： 使用 Storybook 独立构建和记录组件。
• 单元和端到端测试： 使用 Jest、Vitest、Cypress 和 Playwright 对客户端和服务器端进行测试。
• 单仓库管理： 当您的团队同时处理多个项目时，Turborepo 帮助管理共享代码和依赖项。
• 客户端与 React 服务器组件： 深入了解客户端组件和 RSC，包括处理上下文和数据共享的策略。

客户端和服务器通信

一旦你的 Next.js 应用程序部署完成，仍然有许多需要考虑的因素会影响你的应用程序的性能和用户体验。这个工作坊模块涵盖了处理客户端和服务器通信的高级 Next.js 主题：

• 缓存策略： 了解并实现各种缓存和重新验证选项，包括支持 API 路由和使用标签进行精确的缓存控制。
• 文件上传： 使用服务器操作或 API 路由来处理本地和基于云的文件上传，同时无缝更新 UI。
• 选择系统架构： 探索客户端和服务器之间通信的不同架构模式及其权衡。主题包括服务器操作、面向前端的后端、令牌等。
• 高级服务器操作： 超越基本服务器操作，通过构建 CDN 模拟器、拦截客户端 fetch 请求以及构建数据流解决方案来实践高级技术。
• 粒度 Suspense： 实现一个股票数据应用，使用细粒度的 React Suspense 加载状态，为用户提供更好的响应式反馈。