next/head中的Head组件呈现为<body>而不是<head>
我正在用nextjs设置一个项目。我想添加一些全球元标签和标题的项目。我在_app.tsx中使用了来自next/head的Head组件，但无论是在本地主机上还是在使用vercel部署时，它们都会呈现在body中，而不是head中。我以前用过next，不记得遇到过这个问题。
这是我的_app.tsx
import { AppProps } from 'next/app'
import Head from 'next/head'
import Footer from '../components/footer'
import MobileNavBar from '../components/mobileNavBar'
import NavBar from '../components/navBar'
import '../styles.scss'
const App = ({ Component, pageProps }: AppProps) => {
return (
<>
<Head>
<html lang="en" />
<title> Erika's Dog Training </title>
<meta
content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no"
name="viewport"
></meta>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
</Head>
<MobileNavBar />
<NavBar />
<Component {...pageProps} />
<Footer />
</>
)
}
export default App;因此，这里的元标记和标题显示在页面上，但显示在<body>标记的顶部，而不是<head>中
回答 2
Stack Overflow用户
发布于 2020-12-23 05:49:19
考虑下nextjs文档中的this示例的结构。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument我看到的主要区别是，在文档中，他们将head和body都作为兄弟放在<Html>标记中。我怀疑这就是你的问题。我还会删除空的<>和</>标记。
在Head标记中有一行：<html lang="en" />。这使得next很难生成正确的html，因为html标签通常都在Head和body标签之上。
Stack Overflow用户
发布于 2021-10-28 22:07:55
我在next上遇到了同样的问题："11.1.2“。删除<html lang="en" />解决了此问题。我使用以下命令添加了lang值：(https://melvingeorge.me/blog/set-html-lang-attribute-in-nextjs)
/* next.config.js */
module.exports = {
i18n: {
locales: ["en"],
defaultLocale: "en",
},
};https://stackoverflow.com/questions/65415933
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号