如果我們想修改頁面的後設資料，比如 HTML 標籤 <title> 怎麼辦？
<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 元件。
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="/">
<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 文件來實現。 在自定義 Documnet 文件中了解更多訊息。
下一節中，我們將介紹第三方 Javascript 以及使用方式。
© Copyrights 從想像到創造. All Rights Reserved.
