Next.js (7) | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

参考 Implement getStaticProps - Pre-rendering and Data Fetching | Learn Next.js (nextjs.org)

6实现getStaticProps

在 Next 中预渲染.js

接下来.js有两种形式的预渲染：静态生成和服务器端渲染。区别在于它何时为页面生成 HTML。

• 静态生成是在生成时生成 HTML 的预呈现方法。然后，预呈现的 HTML 将在每个请求中_重复使用_。
• 服务器端呈现是在每个请求上生成 HTML 的预呈现方法。

重要的是，Next.js让我们选择要用于每个页面的预呈现表单。可以通过对大多数页面使用静态生成，对其他页面使用服务器端呈现来创建“混合”Next.js 应用。

使用静态生成 （getStaticProps())

现在，我们需要添加一个导入 getStaticProps 并在getSortedPostsDatapages/index.js中调用它。
在编辑器中打开 pages/index.js 并在导出的 Home 组件上方添加以下代码：

import { getSortedPostsData } from '../lib/posts';

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

通过 getStaticProps 返回 props 对象内部的 allPostsData ，博客文章将作为道具传递给Home组件。现在您可以像这样访问博客文章：

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

为了显示博客文章，让我们更新Home 组件以添加另一个标签

，其中包含自我介绍部分下方的数据。不要忘记将道具从 ()更改为 ({ allPostsData }) ：

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}

      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</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[，](http://localhost:3000/)现在应该会看到[博客数据](http://localhost:3000/) 。

祝贺！我们已经成功地获取了外部数据（从文件系统中），并使用此数据预呈现了索引页。

让我们在下一篇讨论使用getStaticProps的一些技巧。