Next.js中getServerSideProps请求本地JSON报Unexpected token <错误

报错Unexpected token < in JSON at position 0的本质是：你发起fetch请求拿到的响应内容不是JSON格式，而是以<开头的HTML文档（这里是Next.js默认的404错误页）。
Next.js框架默认只会将public目录下的文件作为静态资源对外暴露，可通过HTTP路径直接访问。你当前把data1.json放在项目根目录的data文件夹下，该目录不会被映射为可访问的静态路由，请求http://localhost:3000/data/data1.json时会直接返回404的HTML页面，调用res.json()解析HTML内容就会触发该报错。
另外注意你代码中实际使用的是getServerSideProps，和你最初提到的getStaticProps不一致，但这不是触发本次报错的原因。

你可以任选以下一种方案修复：

• 方案1：将静态资源移到public目录
  如果项目根目录没有public文件夹就先新建，把存放JSON的data文件夹整体移动到public目录下，最终文件路径为项目根目录/public/data/data1.json。移动后原有fetch请求路径不需要修改，即可正常访问到JSON内容。注意引用public目录下资源时，路径不需要加/public前缀，直接写根路径后的子路径即可。
• 方案2：服务端直接读取本地文件（推荐）
  getStaticProps和getServerSideProps都在Node.js服务端环境运行，读取项目内本地文件不需要走HTTP请求，直接用Node.js自带的fs模块读取解析即可。这种方式不需要把文件放到公开静态目录，也不会因为开发端口变化、部署域名变更出现请求地址错误的问题，同时更适配静态生成的构建逻辑。
  修改后的trainings.js代码如下：

import fs from 'fs/promises';
import path from 'path';

export default function Trainings({ data }) {
  console.log(data);
  return (
    <main>
      <h1>My trainings</h1>
    </main>
  );
}

export async function getServerSideProps() {
  // 拼接项目根目录下的JSON文件路径
  const jsonPath = path.join(process.cwd(), 'data', 'data1.json');
  const fileContent = await fs.readFile(jsonPath, 'utf-8');
  const data = JSON.parse(fileContent);

  return { props: { data } };
}

如果你后续要改用getStaticProps做静态预渲染，这段读取文件的逻辑可以直接复用，不需要修改。

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