本模块帮助实习生接触 NextJS，构建优化 SEO 速度和严格代码管理的 Web 应用程序。

必须掌握的知识要求

  • JavaScript：ES6+ (Promises, Async/Await, Destructuring)。

  • ReactJS 核心思维：Components, Props, State, Hooks (useState, useEffect, useContext)。

  • SSR/SSG 概念：理解 NextJS 如何在服务器端与客户端渲染数据。

实施步骤

  1. 初始化标准项目：初始化最新的 NextJS 项目 (App Router)，集成 TypeScript 和 TailwindCSS。在实习生管理页面 https://dev.mdcgroup.vn 上声明项目。

  2. 应用 TypeScript：为应用程序中的所有数据严格定义 interface、type、enum。绝不使用 any 数据类型。

  3. 构建路由和界面：使用 App Router (app/folders) 创建页面模板结构（主页、产品、管理员仪表板）。使用 Layouts 共享通用的页眉/页脚。

  4. 获取标准 NextJS 数据：通过 Server Components（默认）从外部 API 获取数据以优化 SEO，并通过 Client Components（需要用户交互时）获取数据。

  5. 状态和表单管理：使用 react-hook-form 等库结合 Zod，在类型安全层严格验证表单输入数据。

  6. 构建和部署：运行 npm run build 命令检查 TypeScript 错误。修复编译过程中出现的所有警告/错误，以创建干净的生产版本。

结果验收

  • 选择题测试：在内部系统上进行 NextJS 和 TS 选择题测试。

  • 问题和建议：说明 NextJS 中 Server Component 和 Client Component 之间的区别和具体使用场景。

  • 结果报告：提交项目的 GitHub/GitLab 存储库链接，并将实际运行的产品移交给导师。

  • 周末讨论：讨论从纯 JavaScript 思维转向 TypeScript 时遇到的困难。