實現 getStaticProps

Next.js 中的提前渲染

Next.js 有兩種提前渲染的形式:靜態生成伺服器渲染。差別在於它生成 HTML 頁面的時間。

  • 靜態生成是其中一種提前渲染的方法,它在建構時生成 HTML 頁面。然後在每個請求中重複使用預先渲染的 HTML。
  • 伺服器渲染是提前渲染的另一種方法,它在每次請求中生成 HTML。

重要的事,Next.js 可以讓你選擇每個頁面的生成方法。你也可以創建一個「混合」的 Next.js 應用,通過對大多數頁面使用靜態生成,並對其他頁面使用伺服器渲染。

使用靜態生成 (getStaticProps())

首先,我們需要去引入 getSortedPostsData 並在 pages/index.js 中的 getStaticProps 中使用它。

在編輯器中開起 pages/index.js,然後在 exportHome component 之前加入以下程式碼:

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

靠著回傳 props 物件,getStaticProps 會把部落格資料傳遞給 Home component。現在你可以像這樣存取部落格資料:

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

為了要顯示這些資料,更新 Home component 並在你的自我介紹下方加入另一個 <section> tag 來顯示部落格資料。別忘了也要把 () 的 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 的技巧。

← 返回上一頁 前往下一頁 →
本篇文章由oaoxd0314

oaoxd0314

貢獻翻譯。瞭解如何參與貢獻