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>
  )
}

点击查看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

PS：棘手的部分是 Next 12 一切正常，但 Next 13 不行。当我们在 Next12 中使用

getStaticProps

和

getServerSideProps

执行相同的操作时，它工作得很好。

Answer 1

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

https://marketplace-api.scistoneprojects.com/api/items/?search=yil

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

一般来说，你必须用 try/catch 包装所有

await

以避免未处理的错误，我认为会给你更准确的信息。

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

另外：我知道开发人员就像 axio，但是

fetch

已经集成了，所以我尽量避免添加另一个库来做与现有库相同的事情。

Answer 2

我认为您可能还需要等待 .json()：

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

我希望它有效