为什么Head组件在Next.js的DOM中没有给出任何输出？

nbysray5 于 2023-06-29 发布在其他

关注(0)|答案(1)|浏览(88)

我试图让<Head>组件工作，但它在DOM中没有给予任何结果。
下面是我的page.js：

import Head from 'next/head'

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

下面是package.json：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.4.7",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

下面是我的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">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

我试过通过互联网和ChatGPT搜索解决方案，但没有真正帮助。我试过在layout.js中从next/document添加Head，并在RootLayout中添加<Head>，但导入next/document时出现错误Error: (0 , _react.createContext) is not a function，我不知道为什么。

next.js

来源：https://stackoverflow.com/questions/76535824/why-is-head-component-not-giving-any-output-in-dom-in-next-js

1条答案

按热度按时间

azpvetkf1#

如果你使用的是新的App Router（Next.js 13或更高版本）* 而不是旧的Pages Router，我猜你不能再使用next/head了。据我所知，这是从Pages Router迁移到App Router的一部分：

第三步：迁移next/head

在pages目录中，next/head React组件用于管理<head> HTML元素，如title和meta。在app目录中，next/head被替换为新的built-in SEO support。
在pages/index.tsx之前：

import Head from 'next/head'

export default function Page() {
 return (
   <>
     <Head>
       <title>My page title</title>
     </Head>
  </>
 )
}

在app/page.tsx之后：

import { Metadata } from 'next'

export const metadata: Metadata = {
 title: 'My Page Title',
}
 
export default function Page() {
 return '...'
}

See all metadata options。
由于它将被弃用，最好使用新的built-in SEO support，称为“元数据”。

赞(0）回复(0）举报 2023-06-29

我来回答

为什么Head组件在Next.js的DOM中没有给出任何输出？

1条答案

第三步：迁移next/head

相关问题

热门标签

最新问答