Next.js 13 - 获取失败错误。我该如何解决这个问题？答案

【问题标题】：Next.js 13 - Fetch Failed Error. How do I resolve this?Next.js 13 - 获取失败错误。我该如何解决这个问题？
【发布时间】：2023-01-30 13:57:27
【问题描述】：

我在尝试 Next 13 beta 版本时遇到了一个奇怪的问题。我想做的是，在服务器端获取数据并将它们显示在页面上。但是，“获取”操作在服务器端失败。下面是 Next.js 页面的代码。它位于“app”目录下，如“app/pageName/page.js”

import React from 'react'

async function callApi() {
  const data = await fetch('https://marketplace-api.scistoneprojects.com/api/items/?search=yil');
  return data.json();
}

export default async function Page() {
  const data = await callApi();
  return (
    <main>
        {data.results && data.results.map((product, index) => (
          <h1>{product.title}</h1>
        ))}
    </main>
  )
}

Click to see Error Message. (UND_ERR_CONNECT_TIMEOUT)

Click to see API response (Django REST)

Click to see Next 13 Doc

注意：提取操作在约 10 秒后失败。

我做了什么：

我试过 Axios，但也失败了。
我尝试将“enableUndici: true”添加到下一个配置文件。（失败）
我尝试了其他模拟 API，有些有效，有些无效。（诡异的）
它们都在客户端正常工作。
它们在 Next 12 中都正常工作。
它们都可以在任何其他 React 应用程序上正常工作。

版本：

节点 18.12.0
下一个 13.1.0
反应 18.2.0
反应-dom 18.2.0
npm 9.2.0

机器：Mac Mini M1 (Ventura 13.1)

【问题讨论】：

你的代码对我来说很好用。
@yousoumar 你用 Next 13 吗？
是：“下一个”：“13.0.6”，“反应”：“18.2.0”，“反应-dom”：“18.2.0”。
@yousoumar 我使用相同的版本。我试过另一台电脑，但有同样的错误。当我尝试不同的 API 服务时，此代码有效。所以问题不在于代码。同时，当我在客户端调用相同的 API 端点时，它也有效。因此，问题也不在于 API 服务。我感到很困惑。
我有同样的问题，一切都是最新的，这很奇怪

标签： reactjs next.js fetch-api react-dom next.js13

【解决方案1】：

使用反引号代替 api 调用的单个引号。

【讨论】：