靜態資源、詮釋資料 和 CSS

1

2

3

4

5

6

7

8

9

10

詮釋資料（Metadata）

如果我們想要修改頁面的詮釋資料，例如 <title> HTML 標籤，該怎麼辦呢？

<title> 為 <head> HTML 標籤的一部分，所以讓我們先來看看如何在 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 元件。

在 first-post.js 中加入 Head

我們尚未在 /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="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );
}

嘗試訪問 http://localhost:3000/posts/first-post ，瀏覽器分頁名稱應該會顯示 “First Post”，若使用瀏覽器的開發者工具，你應該會看到 title 標籤已被加入到 <head> 內。

若想了解更多有關 Head 元件的資訊，請參閱 next/head 的 API 參考。

若想自訂 <html> 標籤，像是加入 lang 屬性，你可以透過建立 pages/_document.js 檔案來達成，詳細資訊請參閱 自訂 Document 文件。

本篇文章由lucy70381

lucy70381

貢獻翻譯。瞭解如何參與貢獻