Next.js中Head组件为何未在DOM中输出内容？

问题原因 #

你使用的是Next.js 13的App Router（通过layout.js和page.js可判断），原next/head组件在App Router中并非推荐用法，且你的RootLayout中缺少<head>标签，导致组件无法将内容挂载到DOM中。另外，你尝试导入next/document的Head组件是错误的——该组件仅适用于Pages Router的_document.js，在App Router中使用会引发兼容性错误。

解决方案 #

方案1：使用Metadata API（官方推荐）

App Router提供了更简洁的元数据声明方式，直接在page.js或layout.js中导出metadata对象即可：

修改page.js：

// 定义页面元数据
export const metadata = {
  title: 'Home',
}

export default function Home() {
  return (
    <main>
      <p>Hello World</p>
    </main>
  )
}

• 若在layout.js中导出metadata，会作为全局默认值，page.js中的metadata会覆盖全局设置。

方案2：手动添加<head>标签并使用next/head

如果你仍想使用next/head组件，需先在RootLayout中添加<head>标签：

修改layout.js：

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head></head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

此时你原来的page.js代码即可正常生效，next/head组件会将内容插入到<head>标签中。

关于之前的错误说明 #

next/document中的Head组件是为Pages Router的_document.js设计的，用于自定义HTML文档结构，在App Router环境中无法直接使用，这就是你遇到Error: (0 , _react.createContext) is not a function错误的原因。

内容的提问来源于stack exchange，提问作者Paurush Sinha