頁面路由 (Pages Router): 實作 getStaticProps

Next.js 中的預渲染 (Pre-rendering)

Next.js 有兩種預渲染形式：靜態生成 (Static Generation) 和 伺服器渲染 (Server-side Rendering)。兩者的區別在於生成頁面 HTML 的時機。

靜態生成 (Static Generation) 是在建置時 (build time) 生成 HTML 的預渲染方法。預先生成的 HTML 會在每次請求時被重複使用。
伺服器渲染 (Server-side Rendering) 則是在每次請求時生成 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 中的預渲染 (Pre-rendering)

使用靜態生成 (getStaticProps())

On this page

使用靜態生成 (`getStaticProps()`)