如何自訂 Next.js 應用程式的 head 標籤

從任何 Next.js 頁面元件中,您都可以向頁面標頭添加資訊。

這在以下情況下很方便:

  • 您想要自訂頁面標題
  • 您想要更改元標籤

您該如何做呢?

在每個元件內部,您可以從 ’next/head’ 中 import ‘Head’ 元件,並將其包含在您的元件 JSX 輸出中:

import Head from 'next/head'

const House = props => (
 <div>
 <Head>
 <title>頁面標題</title>
 </Head>
 {/\* 其餘的 JSX 內容 \*/}
 </div>
)

export default House

您可以添加任何您希望出現在頁面 <head> 區塊內的 HTML 標籤。

在掛載元件時,Next.js 會確保將 Head 內的標籤添加到頁面的標頭中。在卸載元件時,Next.js 會處理刪除這些標籤。