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

Question

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

import React from 'react'

async function callApi() {
  const data = await fetch('https://api-psepeti.herokuapp.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>
  )
}

单击查看错误消息。(UND_ERR_CONNECT_TIMEOUT)

单击查看 API 响应 (Django REST)

点击查看下13文档

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

我做了什么：

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

版本：

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

操作系统：M1 IOS (Ventura 13.1)

接下来的config.js：

const nextConfig = {
  experimental: {
    appDir: true,
    enableUndici: true
  },
}

module.exports = nextConfig

getStaticPropsPS：棘手的部分是在 Next 12 中一切都运行良好，但在 Next 13 中则不然。当我们使用和在 Next12 中执行相同的操作时getServerSideProps，它运行得很好。

Answer 1

错误应该没问题，在浏览器中尝试您的请求：

（更新：这是您提供的旧服务器网址，我无法使用，同时我的浏览器声称这是一个“安全风险”，所以我在这里完全删除了该链接...）

返回“无法连接”，这意味着应该有错误。

一般来说，您必须用awaittry/catch 包装所有内容，以避免未处理的错误，我认为这将为您提供更准确的信息。

try{
  /* await here */
} catch(error: any|unknown){
  /* handle error */
}

另外：我知道开发就像 axio 一样，但是fetch已经集成了，所以我尽量避免添加另一个库，与现有库做同样的事情。