Next.js：TypeError：无法解析来自的URL...当针对API路由相对

disbfnqx 于 2023-05-28 发布在其他

关注(0)|答案(1)|浏览(369)

我在app/page（服务器组件）中有以下代码：

const getUsers = async () => {
  const result = await fetch('/api/users', {method: 'GET'});
  if (result.ok) {
    return result.json();
  }
  return [];
}

export default async function IndexPage() {
  const users = await getUsers();
  return (<h1>Users: {users.length}</h1>);
}

这给了我以下错误：

TypeError: Failed to parse URL from api/users

如何在服务器端组件中引用URL的“左侧”？我能找到的所有Next.js 13示例都指向某个第三方服务器。Postgres示例项目使用了旧的路由器和客户端获取，使用了与我相同的语法。

next.js

来源：https://stackoverflow.com/questions/76309154/next-js-typeerror-failed-to-parse-url-from-when-targeting-api-route-relati

1条答案

按热度按时间

2exbekwf1#

当您在浏览器上使用相对路径调用fetch(/api/users)时，它可以正常工作，因为它使用文档的源来拥有fetch(https://yourdomain.com/api/users)。
然而，在Node.js中，您的服务器端获取正在发生，没有类似的行为。它需要一个完整定义的URL。它与服务器组件无关，事实上，在pages目录中的getServerSideProps等函数中也会出现相同的错误。
你可以阅读更多关于它，如果你想在这个GitHub Issue。
我建议你使用一个环境变量来顺利地进入生产环境，在那里你将有一个不同的URL。
app/page.js：

const getUsers = async () => {
  const result = await fetch(process.env.URL + '/api/users', {method: 'GET'});
  if (result.ok) {
    return result.json();
  }
  return [];
}

export default async function IndexPage() {
  const users = await getUsers();
  return (<h1>Users: {users.length}</h1>);
}

.env：

URL="http://localhost:3000"

您只需稍后在托管服务管理面板上更改URL变量。

赞(0）回复(0）举报 2023-05-28

我来回答

Next.js：TypeError：无法解析来自的URL...当针对API路由相对

1条答案

相关问题

热门标签

最新问答