如何解决来自 next/head 的头部组件渲染到 <body> 而不是 <head>
我正在 nextjs 中建立一个项目。我想为项目添加一些全局元标记和标题。我在 Head
中使用了 next/head
中的 _app.tsx
组件,但是它们在本地主机上和使用 vercel 部署时都在主体中呈现而不是在头部中呈现。我之前用过 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>
解决方法
考虑 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
都作为 兄弟姐妹 strong> <Html>
标签内。我怀疑这是你的问题。我还会删除空的 <>
和 </>
标签。
在 Head 标签内有一行:<html lang="en" />
。由于 html
标记通常位于 Head
和 body
标记之上,因此这将使 next 生成正确的 html 变得具有挑战性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。