我实际上是使用pages/_document.js钩子将Bootstrap和jQuery添加到我的页面中，顺便设置了<Head>
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<title>Default title</title>
<link rel="stylesheet" href="/static/lib/bootstrap3/css/bootstrap.min.css" />
</Head>
<body>
<Main/>
<NextScript/>
<script src="/static/lib/jquery3/jquery-3.3.1.min.js" />
<script src="/static/lib/bootstrap3/js/bootstrap.min.js" />
</body>
</html>
)
}
}
现在我想为我的页面设置一个不同的标题。是否可以在Document之外使用<Head>？我的意思是这样的<div>：
const ContactPage = () => {
return (
<div>
<Head>
<title>You better contact us!</title>
</Head>
<div className="page-body">...</div>
</div>
)
}
如果可能的话，它会覆盖或合并pages/_document.js中已经设置的内容吗？
你想使用next/head组件：
import Head from 'next/head'
export default () =>
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
查看文档：https://nextjs.org/docs/api-reference/next/head
在NextJs 13中使用应用程序目录，
您不必再使用'next/head'组件。相反，您需要做的只是定义一个导出的对象，无论是在layout.js还是page.js静态地持有标题，如下例所示：
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
或者，如果您需要动态标题，则可以使用generateMetadata函数来实现所需的内容，如下例所示：
//in this example I use the generateMetadata function to generate a multi languages title.
export async function generateMetadata({ params: { lng } }) {
const myTitle = lng === "en" ? "Hi" : "مرحبا";
return {
title: myTitle,
};
}
引用基于配置的元数据