NextJS 13 部署时无法从内部 api 路由获取

Question

当从 npm run dev 或 npm run build/start 中的 /api 获取时，我的代码正在工作，但是当尝试将其部署在 Vercel 上时，它无法获取。我将 Next js 13 与应用程序目录一起使用。

这是我在客户端（服务器组件）上的代码

const getAvailableSlots = async () => {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/api/availabilityList`
  );
  if (!res.ok) {
    console.log(res);
  }

  return res.json();
};

const Appointments = async () => {
  const data = await getAvailableSlots();
  return (
    <div className="App">
      <div>
        <AppointmentsPage data={data} />
      </div>
    </div>
  );
};

export default Appointments;

这是 /api 路线：

const handler = async (req, res) => {
  await connectDB();
  console.log("Connected to Mongo");
  try {
    const availiblityList = await Users.find();
    res.status(200).send(availiblityList);
  } catch (error) {
    res.status(400).send(error.message);
  }
};

export default handler;

我尝试直接从服务器组件访问数据，但在开发模式下，它第一次加载时会发出警告，只能将简单对象作为道具传递，之后无法重新加载。

import { getData } from "../../pages/api/availabilityList";

const getAvailableSlots = async () => {
  const res = await getData();
  return res;
};

const Appointments = async () => {
  const data = await getAvailableSlots();
  console.log(data);
  return (
    <div className="App">
      <div className="section section0 fp-auto-height-responsive items-center">
        <AppointmentsPage data={data} />
      </div>
    </div>
  );
};

export default Appointments;

/api

export async function getData() {
  await connectDB();

  const response = await Users.find();
  return response;
}

const handler = async (req, res) => {
  const jsonData = await getData();
  res.status(200).json(jsonData);
};

export default handler;

警告：

Warning: Only plain objects can be passed to Client Components from Server Components.    Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. [{$__: ..., $isNew: false, _doc: ...}, ...]

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Answer 1

我对路由处理程序也有同样的问题。我已经按照你所说的直接从服务器访问数据解决了它。该警告是此处讨论的 React bug（https://github.com/vercel/next.js/issues/47447）。你可以避免这样做

import { getData } from "../../pages/api/availabilityList";

const getAvailableSlots = async () => {
  const res = await getData();
  return res;
};

const Appointments = async () => {
  const data = await JSON.parse(JSON.stringify(await getAvailableSlots()));
  console.log(data);
  return (
    <div className="App">
      <div className="section section0 fp-auto-height-responsive items-center">
        <AppointmentsPage data={data} />
      </div>
    </div>
  );
};

export default Appointments;