有数据和无数据的静态生成

静态生成 可以通过有数据和无数据的方式完成。

到目前为止，我们创建的所有页面都不需要获取外部数据。当应用程序为生产环境构建时，这些页面将自动进行静态生成。

然而，对于某些页面，您可能需要先获取一些外部数据才能渲染 HTML。例如，您可能需要在构建时访问文件系统、获取外部 API 或查询数据库。 Next.js 支持这种情况 — 静态生成 与数据 — 开箱即用。

使用 getStaticProps 的数据静态生成

它是如何工作的？ 在 Next.js 中，当您导出一个页面组件时，您还可以导出一个名为 getStaticProps 的 async 函数。 如果你这样做，那么

• getStaticProps 在生产环境的构建时运行，并且…
• 在该函数内部，您可以获取外部数据并将其作为 props 发送到页面。

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...
 
  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

本质上，getStaticProps 允许您告诉 Next.js：“嘿，这个页面有一些数据依赖项——所以在构建时预渲染此页面时，请务必先解决这些依赖项！”

注意：在开发模式下，getStaticProps 反而会在每次请求时运行。

让我们使用 getStaticProps

实践是最好的学习方式，因此从下一页开始，我们将使用 getStaticProps 来实现我们的博客。