Next.js中slug.js页面如何传递当前Slug获取同类博客数据？

1. 在详情页的getStaticProps中获取同分类数据 #

你已经通过getStaticPaths和getStaticProps实现了博客详情页，直接在getStaticProps里扩展逻辑即可：

• 先通过当前slug获取博客详情，提取分类信息
• 用分类信息请求API获取同分类博客，过滤掉当前博客本身避免重复展示

代码示例：

export async function getStaticProps({ params }) {
  try {
    // 获取当前博客详情
    const currentBlogRes = await fetch(`你的API地址/posts/${params.slug}`);
    if (!currentBlogRes.ok) throw new Error('获取博客详情失败');
    const currentBlog = await currentBlogRes.json();

    // 请求同分类博客（假设API支持按分类slug筛选）
    const relatedBlogsRes = await fetch(`你的API地址/posts?category=${currentBlog.category.slug}`);
    if (!relatedBlogsRes.ok) throw new Error('获取同分类博客失败');
    const relatedBlogs = await relatedBlogsRes.json();

    // 排除当前博客
    const filteredRelatedBlogs = relatedBlogs.filter(blog => blog.slug !== params.slug);

    return {
      props: {
        currentBlog,
        relatedBlogs: filteredRelatedBlogs,
      },
      // 可选：开启增量静态再生，定期更新数据
      revalidate: 60,
    };
  } catch (err) {
    // 处理错误，返回404页面
    return { notFound: true };
  }
}

如果你的API支持直接通过slug返回同分类博客（无需先提取分类），可以简化请求：

const relatedBlogsRes = await fetch(`你的API地址/posts/related?slug=${params.slug}`);

2. 将数据传递给侧边栏组件 #

在详情页组件中，把relatedBlogs和分类名称传给侧边栏组件：

import Sidebar from '../components/Sidebar';

export default function BlogPost({ currentBlog, relatedBlogs }) {
  return (
    <div className="layout">
      <main>
        {/* 博客详情内容 */}
        <h1>{currentBlog.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: currentBlog.content }} />
      </main>
      <aside>
        <Sidebar 
          relatedBlogs={relatedBlogs} 
          categoryName={currentBlog.category.name} 
        />
      </aside>
    </div>
  );
}

3. 编写侧边栏组件展示数据 #

创建Sidebar.js组件，接收并渲染同分类博客：

export default function Sidebar({ relatedBlogs, categoryName }) {
  return (
    <div className="sidebar">
      <h3>同分类博客：{categoryName}</h3>
      {relatedBlogs.length > 0 ? (
        <ul>
          {relatedBlogs.map(blog => (
            <li key={blog.slug}>
              <a href={`/posts/${blog.slug}`}>{blog.title}</a>
            </li>
          ))}
        </ul>
      ) : (
        <p>暂无同分类博客</p>
      )}
    </div>
  );
}

注意事项 #

• 确保API请求路径和参数与后端定义一致
• 处理请求失败的情况，避免页面崩溃
• 如果博客内容更新频繁，开启revalidate实现增量静态再生，无需重新构建整个站点

内容的提问来源于stack exchange，提问作者amit