Next.js执行简单数据请求时出现JSON解析错误求助

问题根源 #

你调用dummyjson接口时触发的错误，核心原因有两点：

• fetch异步处理错误：res.json()返回Promise对象，直接打印无法获取实际JSON数据；同时async函数内混用await与then，未正确处理异步流程。
• 根布局组件缺失导入：RootLayout中未导入Main组件，导致服务器端渲染时尝试解析未定义的组件内容，触发"undefined"不是有效JSON的错误。

修正后的代码 #

Main组件（客户端组件） #

"use client";
import React, { useEffect } from "react";

export default function Main() {
  useEffect(() => {
    const fetchTodos = async () => {
      try {
        // 等待请求响应
        const res = await fetch("https://dummyjson.com/products/1");
        // 校验响应状态
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        // 等待JSON解析完成
        const data = await res.json();
        // 打印实际返回数据
        console.log(data);
      } catch (error) {
        // 捕获并输出错误信息
        console.error("请求出错：", error);
      }
    };

    fetchTodos();
  }, []);

  return <div>Fetch Dummy</div>;
}

layout.jsx（根布局组件） #

// 根据实际文件路径导入Main组件
import Main from './Main';

export default function RootLayout() {
  return (
    <html lang="en">
      <head>
        <title>Digital</title>
      </head>
      <body>
        <Main />
      </body>
    </html>
  );
}

关键修正说明 #

• 用await链式处理请求与JSON解析，确保获取到实际数据而非Promise对象。
• 添加错误捕获逻辑，便于快速排查请求失败原因。
• 在RootLayout中补全Main组件的导入，避免服务器端渲染时出现未定义内容。

内容的提问来源于stack exchange，提问作者Captai-N