Next.js 14中fetch请求JSON文件报错的问题求助

核心问题解析 #

1. 404错误原因：请求URL存在拼写错误——控制台显示实际请求的是/products/porducts.json，但你的代码中写的是/products/products.json，porducts应为products，拼写错误导致服务器找不到对应资源，返回404状态码。
2. JSON解析错误原因：404返回的是Next.js默认的HTML格式错误页面，而非预期的JSON文件，当用response.json()解析HTML内容时，HTML开头的<符号不符合JSON语法规范，因此抛出语法异常。

分步解决步骤 #

1. 修正请求路径拼写 #

确保代码中的请求路径与实际文件路径完全一致，修正拼写错误：

fetch("/products/products.json")
    .then((response) => response.json())
    .then((data) => console.log(data));

重点核对：文件名是products而非porducts。

2. 确认静态文件存放位置（Next.js 14规则） #

Next.js中静态资源必须放在项目根目录的public文件夹下，否则无法直接访问。你的文件结构需符合以下要求：

项目根目录
├── public/
│   └── products/
│       └── products.json  // JSON文件需存放在此路径
├── app/
└── ...其他项目文件

若JSON文件不在该位置，需移动至对应目录，或调整请求路径匹配实际文件位置。

3. 验证资源可访问性 #

在浏览器地址栏直接访问http://localhost:3000/products/products.json，若能正常显示JSON内容，说明路径和拼写无误；若仍返回404，检查以下内容：

• 确认public文件夹拼写正确（小写）
• 确认JSON文件名大小写与请求路径一致（部分系统区分文件名大小写）
• 重启Next.js开发服务器，确保新添加的静态资源被加载

4. 添加错误处理逻辑 #

为更直观排查问题，建议在请求中添加错误处理，避免未捕获的Promise异常：

fetch("/products/products.json")
    .then((response) => {
        if (!response.ok) {
            throw new Error(`请求失败：${response.status} ${response.statusText}`);
        }
        return response.json();
    })
    .then((data) => console.log(data))
    .catch((error) => console.error("请求错误：", error));

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