Next.js 13 - Fetch Failed Error.我该如何解决这个问题?

Question

我在试用Next 13的测试版时遇到了一个奇怪的问题。我要做的是，在服务器端获取数据，并在页面上显示它们。然而，"fetch";服务器端操作失败。下面是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)

点击查看Next 13 Doc

注意:约10秒后读取操作失败。

我做了什么:

• 我尝试了Axios，但它也失败了。
我尝试添加'enableUndici: true'到下一个配置文件。(失败)
• 我尝试了其他模拟api，有些工作，有些没有。(奇怪的)
• 它们都在客户端正常工作。
• 它们在Next 12中都正常工作。
• 它们在任何其他React应用上都能正常工作。

版本:

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

OS: M1 IOS (Ventura 13.1)

下config.js:

const nextConfig = {
experimental: {
appDir: true,
enableUndici: true
},
}
module.exports = nextConfig

PS:棘手的部分是Next 12的一切都很好，但不是Next 13。当我们在Next12中使用getStaticProps和getServerSideProps进行相同的操作时，它工作得很好。

Answer 1

我想你可能需要等待。json()，以及:

async function callApi() {
const data = await fetch('https://api-psepeti.herokuapp.com/api/items/?search=yil');
let result = await data.json();
return resut;
}

i hop it works

Answer 2

错误应该是ok的，在浏览器中尝试您的请求:

(更新:这是你提供的旧服务器url，对我来说是不可用的，同时我的浏览器声称这是一个"安全风险"，所以我完全删除了链接在这里…)

返回"无法连接"。这意味着应该有一个错误。

一般来说，你必须用try/catch来包装所有的await，以避免未处理的错误，我认为这会给你更准确的信息。

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

另外:我得到开发像axio，但是fetch已经集成，所以我尽量避免添加另一个库做相同的像一个现有的。