如何自訂 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 會處理刪除這些標籤。