Question

我已经设置了exportPathMap，但是从组件中导出getStaticProps时得到了一个空对象。我不知道该如何使用它？

// next.config.js
exportPathMap: async function (
    defaultMapPath,
    { dev, dir, outDir, distDir, buildId }
  ) {
    const paths = {}
    const response = await fetch(...)
    const data = await response.json()
    data.forEach((item) => {
      paths[`/item/${item.id}`] = {
        page: '/itemPage',
        query: {
          item,
        },
      }
    })

    return paths
  },

和

// itemPage.js
...
export async function getStaticProps(props) {
  console.log('props', props) // returns "props {}""

  return {
    props: props
  }
}
...

Answer 1

现在很难找到文档中明确说明的内容，但这是您的选择。

选项1

像这样使用getStaticPaths和getStaticProps（来自nextJS示例中的“ with-static-export”）

// [id].js post file

export async function getStaticPaths() {
  const response = await fetch(
    'https://jsonplaceholder.typicode.com/posts?_page=1'
  )
  const postList = await response.json()
  return {
    paths: postList.map(post => {
      return {
        params: {
          id: `${post.id}`,
        },
      }
    }),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  // fetch single post detail
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  )
  const post = await response.json()
  return {
    props: post,
  }
}

选项2

使用exportPathMap和getInitialProps

// item.js
...
Page.getInitialProps = function (context) {
  return context.query.item
}

// next.config.js
module.exports = {
  // ...Same as in your question...
}

两者都可以让您进行静态优化。对于选项1，您无需导出，next build就足够了。对于选项2，您将需要运行next export

来自：https://nextjs.org/docs/advanced-features/static-html-export

如果您的页面没有getInitialProps，则可能根本不需要下一次导出；借助自动静态优化，下一次构建就足够了。

另一个注意事项：您可以在一个项目中同时使用这两种方法。

NextJS：如何获取exportPathMap页面数据？我在getStaticProps

1 个答案: