取得初始屬性 (getInitialProps)

注意事項：getInitialProps 是一個舊版 API。建議改用 getStaticProps 或 getServerSideProps。

getInitialProps 是一個可以添加到頁面預設匯出 React 組件的 async 函式。它會在伺服器端和頁面轉換期間的客戶端再次運行。函式的結果將作為 props 轉發到 React 組件。

pages/index.tsx

import { NextPageContext } from 'next'
 
Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
 
export default function Page({ stars }: { stars: number }) {
  return stars
}

注意事項:

從 getInitialProps 返回的資料在伺服器渲染時會被序列化。請確保從 getInitialProps 返回的物件是一個純粹的 Object，而不是使用 Date、Map 或 Set。

對於初始頁面載入，getInitialProps 只會在伺服器端運行。當使用 next/link 元件或使用 next/router 導航到不同路由時，getInitialProps 也會在客戶端運行。

如果在自訂的 _app.js 中使用了 getInitialProps，且導航到的頁面正在使用 getServerSideProps，則 getInitialProps 也會在伺服器端運行。

Context 物件

getInitialProps 會接收一個名為 context 的參數，它是一個具有以下屬性的物件：

名稱	說明
`pathname`	目前的路由，頁面在 `/pages` 中的路徑
`query`	URL 的查詢字串，解析為物件
`asPath`	顯示在瀏覽器中的實際路徑字串（包含查詢字串）
`req`	HTTP 請求物件（僅伺服器端）
`res`	HTTP 回應物件（僅伺服器端）
`err`	渲染過程中遇到的任何錯誤物件

注意事項

getInitialProps 只能在 pages/ 頂層檔案中使用，不能在巢狀元件中使用。若要在元件層級進行巢狀資料提取，請考慮探索應用程式路由器 (App Router)。
無論您的路由是靜態還是動態，任何從 getInitialProps 以 props 形式返回的資料都可以在客戶端的初始 HTML 中檢查。這是為了允許頁面正確地被注水（hydrated）。請確保您不要在 props 中傳遞任何不應在客戶端可用的敏感資訊。

這有幫助嗎？