静态生成（包含数据与不包含数据）

静态生成 (Static Generation) 可以包含数据，也可以不包含数据。

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

然而，某些页面可能需要在获取外部数据后才能渲染 HTML。您可能需要在构建时访问文件系统、调用外部 API 或查询数据库。Next.js 原生支持这种情况——即包含数据的静态生成 (Static Generation with Data)。

使用 getStaticProps 实现包含数据的静态生成

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

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

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // 从文件系统、API、数据库等获取外部数据
  const data = ...
 
  // `props` 键的值将会
  // 传递给 `Home` 组件
  return {
    props: ...
  }
}

本质上，getStaticProps 允许您告诉 Next.js："这个页面有一些数据依赖项——因此在构建时预渲染此页面之前，请确保先解析它们！"

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

让我们使用 getStaticProps

通过实践更容易学习，因此从下一页开始，我们将使用 getStaticProps 来实现我们的博客。