我试图让<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
,我不知道为什么。
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
之前:在
app/page.tsx
之后:See all metadata options。
由于它将被弃用,最好使用新的built-in SEO support,称为“元数据”。