生产模式下的 Next.js 错误 - 摘要：1782794309

Question

我使用Next 13.4.3。我的应用程序文件夹中没有 API 文件夹，如此处所述，默认情况下所有 pgaes.tsx 等都位于应用程序文件夹 SSR 中：https: //nextjs.org/docs/app/building-your-application/routing /路由器处理程序。在我的主页 /app/page.tsx 中，当调用从 MongoDB (app/products/route.ts) 加载数据时，我会执行 fetch 操作。一旦我切换到生产模式，一切都会在本地运行，我收到以下错误

应用程序错误：发生客户端异常（有关详细信息，请参阅浏览器控制台）。摘要：1782794309

在 Chrome 调试器控制台中：

139-fafe6b4f143efdb1.js:1 错误：服务器组件渲染中发生错误。在生产版本中省略了特定消息，以避免泄露敏感细节。此错误实例中包含摘要属性，它可以提供有关错误性质的其他详细信息。

如果我点击 139-fafe6b4f143efdb1.js 我得到这个：

我如何找出错误在哪里？

Answer 1

我不确定这是否是最佳解决方案，但就我而言，我发现问题在于尝试直接获取服务器组件。就我而言，我使用“使用客户端”将组件转换为客户端组件，但我更改了执行获取的方式，如下所示：

在服务文件外部创建一个函数，如下所示：

import axios from "axios";
const API_URL = '/api/item/';

const handleViewDetails = async (itemId: string) => {
    try {
      const response = await axios.get(`${API_URL}${itemId}`);
      return response.data;
    } catch (error:any) {
  
      const errorMessage = error.response?.data?.message || "Could not fetch item.";
      console.error('Error fetching item:', errorMessage);
      throw new Error(errorMessage);
    }
  };

  export default handleViewDetails;

我的组件看起来像：

  "use client"
  import { useEffect, useState } from "react";
  import handleViewDetails from "./services";
  import { useParams } from "next/navigation";

  const DetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [loading, setLoading] = useState<boolean>(false);


  const [itemData, setItemData] = useState<ItemType | null>(null);

  useEffect(() => {
    setLoading(true);
    handleViewDetails(id)
      .then((data: item) => { 
        setItemData(data);
        setLoading(false);
      })
      .catch((error: Error) => {
        console.error("Failed to load item:", error);
        setLoading(false);
      });
  }, [id]); 

  if (loading) {
    return <h1>Loading...</h1>;
  }

  if (!item) {
    return <h1>No tourist data found.</h1>;
  }

  return (
    <>
      <h1>{itemData.data}</h1>
      <h1>{itemData.data}</h1>
      <h1>{itemData.data}</h1>
    </>
  );
};

export default DetailPage;

就我而言，在获取项目的详细信息时发生错误，这就是我提供此示例的原因