/

Next.js: 使用自訂標籤填充 head 標籤

Next.js: 使用自訂標籤填充 head 標籤

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

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

這在以下情況下很方便：

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

您該如何做呢？

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

1
2
3
4
5
6
7
8
9
10
11
12
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 會處理刪除這些標籤。

tags: [“Next.js”, “自訂標籤”, “head 標籤”]