全栈开发next.js 与strapi 视频课程内容总结4

时间：2025-03-15 08:31:05来源：525游

Next.js 全栈开发实战课：每日一签网站——寻找好用的启动模版，快速搭建网站；了解 Next.js 项目结构，使用 Strapi 提供数据 - YouTube https://www.youtube.com/watch?v=XEkHGAFzWdM

以下是对博主视频第四段内容的总结，基于提供的 YouTube 视频转录内容（Next.js 全栈开发实战课：每日一签网站——寻找好用的启动模板，快速搭建网站；了解 Next.js 项目结构，使用 Strapi 提供数据），整理为清晰结构并提炼核心要点：

视频内容总结：Next.js 全栈开发实战课 - 第四段
1. 开场与课程回顾

主题：Next.js + Strapi + Tailwind CSS 全栈开发实战课程第四课。
回顾：
- 第一课：项目介绍和技术选型。
- 第二课：在 Zeabur 部署 Strapi。
- 第三课：使用 Cloudflare 管理域名、R2 存储和缓存。
目标：开始网站前端建设，寻找模板，搭建 Next.js 项目并连接 Strapi 数据。

2. 网站建设方式与模板选择

传统方式：公司场景下有产品经理和设计师提供说明书和设计稿，直接制作页面。
独立开发方式：
- 适合全栈开发、技术出海等场景。
- 第一步：寻找开源模板快速启动。
模板来源：
- Tailwind CSS：
  - 提供组件库和模板库（如 UI、博客、SaaS、Changelog 等）。
  - 博主购买了终身会员，选择 Changelog 模板（免费与否未明确）。
  - 理由：与“每日一签”需求相似（每日更新内容，最新优先，带订阅功能、响应式、黑白模式）。
- Vercel Templates：
  - Vercel 平台提供多种开源模板（如相册、聊天机器人）。
  - 可直接部署到 Vercel 并复制到 GitHub 仓库，适合快速启动和二次修改。
选择与下载：
- 下载 Changelog 模板（comet.zip），解压后选取 TypeScript 版本，放入 Mono Repo 的 website 目录。

3. 项目初始化与升级

调整目录：
- 删除空的 website 目录，将模板重命名为 website。
依赖安装与升级：
- 原始模板基于 Next.js 14，升级到 Next.js 15 和 React 19。
- 目标：使用最新版本，确保课程内容前沿。
运行项目：
- 执行 npm install 和 npm run dev，成功启动模板，显示单页 Changelog 效果。

4. Next.js 项目结构解析

目录概览：
- mdx：支持 Markdown + JSX，适合内容页面（本次不用，保留备用）。
- env：环境变量配置。
- eslint、postcss（支持 CSS 嵌套）、prettier：代码规范工具。
- tailwind.config：Tailwind CSS 配置。
- tsconfig：TypeScript 配置（目标改为 ESNext）。
- app：采用 App Router（Next.js 14+ 默认路由方式）。
- components：组件目录。
- fonts（删除英文字体）、images、styles。
App Router 特点：
- layout.tsx：可嵌套的全局/局部布局组件。
- page.tsx：对应具体 URL 的页面组件（如 / 对应 app/page.tsx）。
- 示例：/qian/[date] 需创建 app/qian/[date]/page.tsx。

5. 改造模板

目标效果：
- 首页：左右布局，左侧预览所有签，右侧展示最新签。
- 点击签后：进入详情页展示具体内容。
调整布局：
- 删除 fonts（因中文字体文件大，暂不用）。
- 将 components/layout.tsx 移入 app/layout.tsx，实现全局左右结构。
- 清空 app/page.tsx，准备加载 Strapi 数据。
保留与删除：
- 保留 metadata（SEO 相关，待讲解）。
- 删除 mdx 内容（改用 Strapi API）。

6. 连接 Strapi API

服务函数：
- 创建 services/index.ts，定义 fetchStrapi 函数：
  - 参数：path（路径）、params（查询参数）、noCache（是否清除缓存）。
  - 使用 fetch 请求 Strapi API，添加 cache: 'no-store' 可禁用缓存。
获取数据：
- 在 app/page.tsx 中：
  - 调用 fetchStrapi('/qians', { pagination: { pageSize: 15 }, sort: 'date:desc', populate: 'thumbnail' })。
  - 获取每日一签数据（15 条/页，按日期降序，包含缩略图）。
- 环境变量：配置 STRAPI_URL 和 API_TOKEN。
类型定义：
- 创建 types/index.ts：
  - StrapiObject：通用 Strapi 数据结构（id 和 attributes）。
  - StrapiResponse<T>：包含 data（数组或对象）和 meta（分页信息）。
- 引用 Strapi 生成的 Qian 类型（cms/src/types/generated/contentTypes）。
渲染数据：
- 从响应中提取 data（qians.data），遍历渲染。
- 创建 components/Article.tsx，展示 title、content、date 和 thumbnail。

7. 调试与优化

问题排查：
- 初次运行报错 map is not a function，因直接使用 response.json()（包含 meta）。
- 调整为 response.json().data，并添加类型 StrapiResponse<Qian>[]。
日志调试：
- 使用 console.log('xxx', data) 检查数据（xxx 前缀便于搜索）。
效果：
- 成功显示 Strapi 数据（标题、内容等），虽不完美但初步实现。

8. 课程总结与展望

完成内容：
- 寻找并改造 Tailwind CSS 的 Changelog 模板。
- 初始化 Next.js 项目，升级至最新版本。
- 解析 App Router 结构，调整全局布局。
- 连接 Strapi API，渲染数据。
下步计划：
- 调整左侧预览内容。
- 优化右侧页面布局。
- 开发详情页（点击进入）。
建议：
- 新手可从模板学习，快速上手。
- 鼓励提问、评论和分享视频。