页面路由：实现 getStaticProps

Next.js 中的预渲染

Next.js 提供两种预渲染方式：静态生成 (Static Generation) 和 服务端渲染 (Server-side Rendering)。两者的区别在于生成 HTML 页面的时机不同。

静态生成 是在构建时生成 HTML 的预渲染方式。预渲染的 HTML 会在每次请求时被复用。
服务端渲染 是在每次请求时生成 HTML 的预渲染方式。

重要的是，Next.js 允许你为每个页面选择使用哪种预渲染方式。你可以创建一个"混合"型 Next.js 应用，对大多数页面使用静态生成，对其他页面使用服务端渲染。

使用静态生成 (`getStaticProps()`)

现在我们需要导入 getSortedPostsData 并在 pages/index.js 的 getStaticProps 中调用它。

在编辑器中打开 pages/index.js，在导出的 Home 组件上方添加以下代码：

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

通过在 getStaticProps 的 props 对象中返回 allPostsData，博客文章数据将作为 prop 传递给 Home 组件。现在你可以这样访问博客数据：

export default function Home ({ allPostsData }) { ... }

为了展示博客文章，我们来更新 Home 组件，在自我介绍部分下方添加一个包含数据的 <section> 标签。别忘了将 props 从 () 改为 ({ allPostsData })：

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* 保留此处现有代码 */}
 
      {/* 在现有 <section> 标签下方添加这个新标签 */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>博客</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

现在访问 http://localhost:3000 应该能看到博客数据了。

博客数据

恭喜！我们已经成功获取了外部数据（来自文件系统），并使用这些数据预渲染了首页。

实现 getStaticProps

Next.js 中的预渲染

使用静态生成 (getStaticProps())

On this page

使用静态生成 (`getStaticProps()`)