Next.js项目页面：组件映射渲染及网格布局问题求助

1. 组件渲染类型错误的修复 #

你现在所有项目都渲染成<FeaturedProject/>，核心原因是映射时没有根据数据区分项目类型。

首先确保projectData数组里每个对象都有一个标记字段，比如isFeatured（布尔值），用来区分是否为特色项目：

const projectData = [
  { id: 1, isFeatured: true, title: "特色项目1", /* 其他字段 */ },
  { id: 2, isFeatured: false, title: "普通项目1", /* 其他字段 */ },
  // 更多项目数据
];

然后在映射渲染时，根据该字段判断要渲染的组件：

<div className="projects-grid">
  {projectData.map(project => {
    // 必须添加唯一key，避免React渲染警告
    return project.isFeatured 
      ? <FeaturedProject key={project.id} {...project} /> 
      : <Project key={project.id} {...project} />;
  })}
</div>

2. 网格布局实现 #

要实现特色项目占12列、普通项目占6列的布局，用CSS Grid就能快速完成：

父容器样式 #

给包裹所有项目的容器添加以下CSS：

.projects-grid {
  display: grid;
  /* 划分12等宽列 */
  grid-template-columns: repeat(12, 1fr);
  /* 项目间的间距，可根据设计调整 */
  gap: 1.5rem;
  /* 可选：给容器添加内边距，避免项目贴边 */
  padding: 0 1rem;
}

项目组件样式 #

给<FeaturedProject/>的根元素添加占满12列的样式：

.featured-project {
  grid-column: span 12;
}

给<Project/>的根元素添加占6列的样式：

.project {
  grid-column: span 6;
}

响应式适配（可选） #

如果需要在小屏幕下让普通项目也占满12列，添加媒体查询：

@media (max-width: 768px) {
  .project {
    grid-column: span 12;
  }
}

最后记得给两个组件的根元素加上对应的类名，比如<FeaturedProject/>用className="featured-project"，<Project/>用className="project"。

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