[中字] 基于 shadcn-ui 的流畅 Next.JS

应用开发实战课程（中文字幕英文视频教程） 一、课程定位与适用人群 本课程专为有一定前端基础（掌握 HTML、CSS、JavaScript 及 React 基础语法）的开发者设计，无论是希望提升框架与组件库使用能力的前端工程师，还是需要独立开发完整项目的全栈开发者，亦或是对现代化前端工具链感兴趣的技术学习者，都能通过课程获得切实的技能提升。无需复杂的后端知识储备，只需聚焦前端开发流程，即可跟随课程完成从 “理论” 到 “实战” 的落地。 二、课程模块与核心内容 课程共分为 6 大核心模块，包含 36 个细分章节，每个章节均配备视频教程与中文字幕，确保学习过程清晰易懂。模块设计遵循 “循序渐进、由浅入深” 的逻辑，从基础认知到项目实战，再到源码探索与贡献，形成完整的学习闭环。 模块 1：课程入门与基础认知（第 1-2 章） 本模块旨在帮助学习者快速建立对课程的整体认知，明确学习目标与技术栈定位： 第 1 章：课程介绍（Introduction）：梳理课程整体结构、核心技术栈（Next.JS 与 shadcn-ui）的优势，以及学习后能掌握的具体技能，让学习者建立清晰的学习预期。 第 2 章：课程详情（About the Course）：深入讲解课程的实战项目背景、技术选型原因，以及如何通过课程解决实际开发中的痛点（如组件复用、样式统一、性能优化等），为后续学习奠定基础。 模块 2：shadcn-ui 基础与项目初始化（第 3-7 章） 作为课程的技术基础模块，本部分聚焦 shadcn-ui 的核心概念与项目搭建流程，帮助学习者掌握工具链的使用方法： 第 3 章：shadcn-ui 的设计理念（The shadcn-ui way）：解析 shadcn-ui“组件可定制、样式可扩展” 的核心设计思路，对比传统组件库的优势，理解其在项目开发中的高效性。 第 4 章：创建 shadcn-ui 新项目（How to create a new shadcn-ui project）： step-by-step 演示从环境准备到项目创建的完整流程，涵盖依赖安装、配置文件设置等关键步骤，确保学习者能独立搭建项目。 第 5 章：探索 next-template 项目结构（Exploring the shadcn-ui next-template Project Structure）：拆解 shadcn-ui 官方 next-template 的目录结构，讲解各核心文件（如配置文件、组件目录、样式文件）的作用，帮助学习者理解项目组织逻辑。 第 6 章：shadcn-ui 命令行工具（CLI）（shadcn-ui Command Line (CLI) Tool）：详解 CLI 工具的安装与使用，包括组件按需引入、项目配置修改等常用命令，提升组件管理与项目开发效率。 第 7 章：shadcn-ui 中的排版设计（Typography in shadcn-ui）：学习 shadcn-ui 的排版系统，包括字体大小、字重、行高的配置与使用，掌握如何通过排版优化页面可读性与视觉层次。 模块 3：实战项目 1：新闻网站开发（第 8-13 章） 本模块以 “新闻网站” 为实战载体，将 Next.JS 与 shadcn-ui 的基础能力应用于实际项目，覆盖页面布局、导航设计、数据获取等核心开发场景： 第 8 章：新闻网站 - 布局搭建（Building a News Site - Layout）：基于 shadcn-ui 的布局组件，设计新闻网站的整体框架（如侧边栏、主内容区、页脚），实现响应式布局的基础结构。 第 9 章：新闻网站 - 导航实现（Building a News Site - Navigation）：开发网站导航栏，包括菜单切换、路由跳转、active 状态高亮等功能，结合 shadcn-ui 的交互组件提升用户体验。 第 10 章：新闻网站 - 文章数据获取（Building a News Site - Fetching Articles）：学习 Next.JS 的数据获取方法（如 SSR/SSG/ISR），实现新闻文章数据的异步请求与渲染，确保页面性能与内容实时性。 第 11 章：新闻网站 - 首页开发（Building a News Site - Home Page）：整合布局、导航与数据，完成首页开发，包括轮播图、热门文章列表、分类入口等模块，注重页面视觉设计与交互逻辑。 第 12 章：新闻网站 - 分类页面开发（Building a News Site - Category Page）：实现按分类筛选文章的功能，设计分类导航与文章列表展示，掌握页面参数传递与数据筛选的实现方法。 第 13 章：新闻网站 - 文章预览功能（Building a News Site - Article Preview）：开发文章预览卡片，包括缩略图、标题、摘要、发布时间等元素，结合 shadcn-ui 的卡片组件优化样式与交互效果。 模块 4：shadcn-ui 进阶功能与页面开发（第 14-21 章） 本模块深入 shadcn-ui 的进阶特性，同时拓展实战项目场景，覆盖主题定制、动画效果、表单开发等关键能力： 第 14 章：shadcn-ui 暗黑模式（shadcn-ui Dark Mode）：学习暗黑模式的配置与切换逻辑，实现页面主题的动态切换，适配不同用户的视觉偏好。 第 15 章：shadcn-ui 主题定制（Theming in shadcn-ui）：掌握 shadcn-ui 的主题系统，包括颜色、间距、圆角等变量的自定义，实现项目视觉风格的统一与个性化。 第 16 章：shadcn-ui 样式管理（Shadcn-ui Styles）：详解 shadcn-ui 的样式方案（如 CSS Modules、Tailwind CSS 集成），学习样式覆盖、组件样式修改的方法，解决样式冲突问题。 第 17 章：shadcn-ui 中的动画效果（Animations in shadcn-ui）：引入 shadcn-ui 的动画组件，实现页面元素的过渡、悬浮、加载等动画效果，提升页面交互的流畅度与趣味性。 第 18 章：通用布局与页头开发（Layout And Header）：提炼项目中的通用布局组件，优化页头设计（如搜索框、用户入口），实现组件复用与代码解耦。 第 19 章：活动页面开发（Event Page）：拓展实战场景，开发活动展示页面，包括活动列表、活动详情等模块，结合 shadcn-ui 的排版与卡片组件优化页面结构。 第 20 章：活动表单开发（The Event Sheet）：设计活动信息表单，实现表单元素的布局与校验，掌握 shadcn-ui 表单组件的使用方法。 第 21 章：shadcn-ui 卡片变体创建（Create a Card Variant in shadcn-ui）：学习自定义卡片组件变体，根据项目需求修改卡片的样式、结构与交互，提升组件的灵活性与适配性。 模块 5：用户系统与高级功能开发（第 22-33 章） 本模块聚焦企业级应用的核心功能，包括用户认证、数据交互、响应式适配等，提升项目的完整性与实用性： 第 22 章：构建用户上下文（Building The User Context）：使用 React Context API 管理用户状态（如登录状态、用户信息），实现跨组件的状态共享，为用户系统奠定基础。 第 23 章：登录按钮开发（Building the Login Button）：设计登录按钮组件，实现按钮状态切换（登录 / 已登录）、点击触发登录弹窗等功能，结合 shadcn-ui 的按钮组件优化交互。 第 24 章：认证表单开发（Building the Authentication Form）：开发登录 / 注册表单，包括输入框、密码隐藏 / 显示、表单提交等功能，集成表单校验逻辑，确保数据合法性。 第 25 章：完成认证流程（Finish the Authentication Flow）：实现完整的用户认证流程，包括表单提交、接口请求、Token 存储、页面跳转等，确保用户登录状态的持久化与安全性。 第 26 章：RSVP 功能开发（RSVP Functionality）：针对活动场景，开发 “活动报名” 功能，实现用户报名状态的记录与展示，掌握用户行为数据的交互逻辑。 第 27 章：shadcn-ui 表格设置与配置（Setting Up and Configuring Tables in shadcn-ui）：学习 shadcn-ui 表格组件的使用，包括列定义、数据渲染、表格样式配置等，实现结构化数据的展示。 第 28 章：自定义单元格与交互行（Custom Cells and Interactive Rows）：拓展表格功能，实现自定义单元格（如按钮、链接）与行交互（如点击行跳转、行选中），提升表格的实用性。 第 29 章：新建活动表单开发（New Events Form）：开发活动创建表单，包括多类型输入框（文本、日期、下拉框）、表单提交与数据处理，掌握复杂表单的开发技巧。 第 30 章：分页与排序功能（Pagination and Sorting）：为表格与列表添加分页、排序功能，优化大量数据的展示效率，提升用户浏览体验。 第 31 章：移动端适配（Mobile View）：针对移动端设备，优化页面布局与交互（如导航折叠、按钮尺寸调整），确保项目在不同设备上的兼容性与可用性。 第 32 章：组件组合设计（What is component composition）：讲解 “组件组合” 的设计思想，学习如何通过组件拆分与组合提升代码复用率与可维护性，避免组件冗余。 第 33 章：基于 shadcn-ui 的筛选组件开发（Building a Filter Component with shadcn-ui）：开发数据筛选组件，实现多条件筛选、筛选状态保存等功能，结合 shadcn-ui 的选择器、输入框等组件提升筛选体验。 模块 6：shadcn-ui 深度探索与贡献（第 34-36 章） 本模块带领学习者深入 shadcn-ui 的底层逻辑，从 “使用者” 转变为 “参与者”，提升技术深度与开源协作能力： 第 34 章：shadcn-ui 源码架构（shadcn-ui source code architecture）：解析 shadcn-ui 的源码组织方式，包括组件封装逻辑、样式处理机制、工具函