【NEXT.JS 系列】預先渲染和數據獲取 5

實做 getStaticProps

首先，安裝 gray-matter，它可以讓我們解析每個 markdown 文件中的 metadata。

$ npm install gray-matter

接下來，我們將建立一個簡單的函式庫，用於從檔案系統中獲取資料。

• 建立一個名為 lib 的頂層目錄
• 在 lib 中，建立一個名為 posts.js 的文件，其內容如下

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);

    // Combine the data with the id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1;
    } else if (a > b) {
      return -1;
    } else {
      return 0;
    }
  });
}

注意：在 Next.js 中，lib 文件夾沒有像 pages 文件夾那樣的指定名稱，因此您可以將其命名為任何名稱。 通常使用 lib 或 utils 是慣例。

現在，我們需要為 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，部落格文章將作為 props 傳遞給 Home 元件。 現在您可以像這樣訪問部落格文章：

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

為了顯示部落格文章，讓我們更新 Home 元件以添加另一個 <section> 標記，其中包含您的自我介紹部分下方的數據。 不要忘記將 props 從 () 更改為 ({ 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，您現在應該會看到部落格資料。

恭喜！ 我們已經成功地（從檔案系統）獲取了外部資料，並使用這些資料預先渲染了索引頁面。

讓我們在下一頁討論使用 getStaticProps 的一些技巧。