如何在Next.js中调用无服务器函数getStaticPaths

我在Vercel部署工作流程中使用Next.js,我遵循this指南尝试在构建时设置页面生成。具体部分显示了以下示例,该示例根据外部API的响应生成页面:


// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map(post => ({
    params: { id: post.id },}))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths,fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1,then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

我想精确地做到这一点,但是我将我的API编写为同一代码存储库中的Node.js无服务器功能,它不是外部api。

我尝试执行以下操作以调用我的api:

// This function gets called at build time
export async function getStaticPaths() {
    const res = await fetch('/api/get-designs');
    const designs = await res.json();

    // Get the paths we want to pre-render based on posts
    const paths = designs.map(design => ({
        params: { id: design.id },}))

    return {
        // Only posts returned by api are generated at build time
        paths: paths,// Enable statically generating additional pages
        fallback: true,}
}

但是我收到一个错误,指出fetch api url必须是绝对的。由于Vercel的部署方式,我不会总是拥有相同的部署URL,所以我认为我不能在这里使用硬编码值。另外,我怀疑因为此函数在构建时运行,所以我的函数尚未运行,因此无法调用。我仍在努力解决这个Next.js静态生成的网站工作流程的问题,但是基本上我很困惑,因为它们似乎鼓励使用无服务器功能以及这种getStaticPaths方法来生成页面,但是它们似乎并没有一起工作,除非我缺少什么。

有没有一种方法可以运行我的api在构建时获取这些结果?任何指导将不胜感激! 谢谢!

cen12 回答:如何在Next.js中调用无服务器函数getStaticPaths

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2325171.html

大家都在问