Next.js/React项目中小数据的最佳存储方案咨询

本地JSON文件：完全可行，更是首选 #

• 直接在项目里创建projects.json文件来存数据，示例结构：

[
  {
    "title": "个人博客系统",
    "image": "/assets/projects/blog.png",
    "link": "https://your-blog-url.com"
  },
  {
    "title": "电商原型页面",
    "image": "/assets/projects/ecommerce.png",
    "link": "https://your-ecommerce-demo.com"
  }
]

• 在组件里直接导入使用，代码示例：

import projects from '../data/projects.json';

export default function ProjectsSection() {
  return (
    <div className="projects-container">
      {projects.map((project, idx) => (
        <div key={idx} className="project-card">
          <img src={project.image} alt={project.title} />
          <h3>{project.title}</h3>
          <a href={project.link} target="_blank" rel="noopener noreferrer">查看详情</a>
        </div>
      ))}
    </div>
  );
}

• 好处：完全零配置，加载速度快，修改数据直接编辑JSON文件即可，完全满足你不想用服务器或额外存储的需求。

Next.js API：没必要（除非有特殊需求） #

• 要是只是静态展示项目数据，用API属于画蛇添足。API适合需要动态处理数据、做权限校验或者逻辑运算的场景，你的情况完全用不上。
• 用API还要额外写pages/api下的路由文件，平白增加复杂度。

无需服务器的最佳简单方案：本地JSON文件 #

• 这就是最适合你的方案：不需要任何服务器配置，数据会和代码一起打包部署，后续修改数据只需要编辑JSON文件再重新部署就行。
• 如果怕每次改数据都要重新部署，也可以用Vercel这类静态托管平台的在线编辑功能直接修改JSON文件，本质还是基于本地文件的管理。

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