頁面路由 (Pages Router): 元數據 (Metadata)

如果我們想修改頁面的元數據，例如 HTML 的 <title> 標籤，該怎麼做呢？

<title> 是 HTML <head> 標籤的一部分，讓我們來看看如何在 Next.js 頁面中修改 <head> 標籤。

請在編輯器中打開 pages/index.js 並找到以下程式碼：

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

注意這裡使用的是大寫的 <Head> 而非小寫的 <head>。<Head> 是 Next.js 內建的 React 組件，它允許你修改頁面的 <head> 部分。

你可以從 next/head 模組導入 Head 組件。

將 `Head` 加入 `first-post.js`

我們尚未為 /posts/first-post 路由添加 <title>。現在就來加上一個。

打開 pages/posts/first-post.js 文件，在文件開頭添加從 next/head 導入 Head 的語句：

import Head from 'next/head';

然後更新導出的 FirstPost 組件以包含 Head 組件。目前我們先只添加 title 標籤：

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← 返回首頁</Link>
      </h2>
    </>
  );
}

嘗試訪問 http://localhost:3000/posts/first-post。現在瀏覽器標籤頁應該會顯示「First Post」。使用瀏覽器的開發者工具，你可以看到 <head> 中已添加了 title 標籤。

要了解更多關於 Head 組件的資訊，請查閱 next/head 的 API 參考文件。

如果你想自訂 <html> 標籤，例如添加 lang 屬性，可以通過創建 pages/_document.js 文件來實現。詳情請參閱自訂 Document 文件。

元數據

將 Head 加入 first-post.js

On this page

將 `Head` 加入 `first-post.js`