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

时间：2025-03-15 16:25:48来源：525游

(1292) Next.js 全栈开发实战课：每日一签网站——调整模版组件内容，开发详情页 - YouTube https://www.youtube.com/watch?v=HnGn48h3kUM

以下是对博主视频第五段内容的总结，基于提供的 YouTube 视频转录内容（Next.js 全栈开发实战课：每日一签网站——调整模板组件内容，开发详情页），整理为清晰结构并提炼核心要点：

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

主题：Next.js 全栈开发实战课第五课。
回顾：前几课完成基础架构和网站模板搭建，连接 Strapi 数据。
目标：
- 调整模板组件内容（左侧栏和首页）。
- 开发详情页（二级页面）并加载数据。

2. 初始调试与优化

问题：
- 本地 Node.js 更新至 23，导致模板运行失败（shiki 兼容性问题）。
- shiki 是代码高亮库，原模板用于 Changelog，但“每日一签”无需此功能。
解决：
- 全局搜索 shiki，删除相关引用（rehype-shiki 插件及配置）。
- 卸载依赖：pnpm un shiki，减少不必要的第三方库。
效果：重新运行 pnpm run dev，项目正常启动。

3. 调整模板组件

目标效果：
- 左侧：更新为每日一签的预览列表。
- 右侧：显示每日内容，点击标签进入详情页。
布局结构：
- 使用 Next.js 的 App Router：
  - layout.tsx：控制全局布局（左右结构）。
  - page.tsx：控制页面内容。
- 当前状态：已通过 components/layout.tsx 实现左右结构。
调整 Sidebar：
- 文件：components/layout.tsx。
- 组件：
  - Sidebar：左侧栏。
  - FlexSidebar：固定侧边栏，包含 main（Intro）和 footer（IntroFooter）。
- 修改 IntroFooter：
  - 原署名改为“每日一签”。
  - 添加版本号（v0.1.0）。
- 版本号实现：
  - 在 next.config.mjs 中添加 env: { VERSION: package.version }。
  - 在组件中通过 process.env.VERSION 访问，解决缓存导致的版本不一致问题。
首页链接：
- 在 app/page.tsx 中，为每条数据添加 next/link，路径为 /qian/[date]。

4. 开发详情页

路径规划：
- 示例：/qian/2024-12-02。
- 未来扩展：可能添加数字参数（如 /qian/2024-12-02/4111），暂不实现。
文件结构：
- 创建 app/qian/[date]/page.tsx，使用动态路由。
函数定义：
- 类型：Props { params: Promise<{ date: string }> }（Next.js 15+ 使用 Promise）。
- 两个函数：
  - generateMetadata：生成 SEO 相关元数据。
  - QianPage：页面组件。

元数据：

示例：
tsx

export async function generateMetadata({ params }: Props) {
  const date = await params.date;
  return {
    title: `每日一签 - ${date}`,
    description: "每日运势解读",
    authors: [{ name: "Meathill" }],
    alternates: { canonical: `/qian/${date}` },
    openGraph: { title: `每日一签 - ${date}` },
  };
}

作用：提升 SEO 和社交媒体分享效果。

页面组件：
- 获取 date：const date = await params.date。
- 数据加载：调用服务函数获取特定日期的数据。

5. 数据加载与缓存

服务函数：

创建 services/qian.tsx：
tsx

import { cache } from 'react';
import { fetchStrapi } from './index';

export const getQianByDate = cache(async (date: string): Promise<Qian> => {
  const response = await fetchStrapi(`/qians`, {
    filters: { date: { $eq: date } },
    populate: 'thumbnail',
  });
  return response.json().data[0];
});

使用 filters 而非 documentId，保持 URL 可读性（SEO 友好）。
使用 cache（React 19 功能）避免重复请求。

渲染：
- 在 app/qian/[date]/page.tsx 中：
  - 调用 getQianByDate(date)。
  - 使用 components/Article.tsx 渲染标题、日期和缩略图。
- 添加 <p> 标签临时承载 content。

6. 处理图片

Strapi Blocks：
- content 使用 Blocks 格式（JSON 对象数组），支持灵活渲染。
- 对比纯文本和 Markdown，Blocks 更易自定义样式。

图片选择：

Strapi 提供多尺寸图片（原图、大图、中图、小图、缩略图）。
问题：非技术用户可能上传大文件（如 3-4MB）。

解决：创建 utils/index.ts 的 getImageUrl 函数：
tsx

import { ImageFormat } from '../constants';

export function getImageUrl(formats: ImageFormat[], target = 'medium') {
  const order = ['thumbnail', 'small', 'medium', 'large'];
  const targetIndex = order.indexOf(target);
  const available = formats.find(f => order.includes(f.name));
  return available?.url || formats[0]?.url;
}

在 constants/index.ts 定义 ImageFormat 类型和尺寸常量。

渲染图片：
- 使用普通 <img> 标签（而非 Next.js <Image>，因 Vercel 优化对中国大陆用户不友好）。
- 属性：src={getImageUrl(qian.attributes.thumbnail.data.attributes.formats)}、alt、className="max-w-full block"、loading="lazy"。