next/head 中的 Head 组件渲染为 <body> 而不是 <head>

Question

next/head 中的 Head 组件渲染为 <body> 而不是 <head>

我正在 nextjs 中建立一个项目。我想向项目添加一些全局元标签和标题。我使用了in 中Head的组件，但它们在本地主机上以及使用 vercel 部署时都在主体中而不是头部中呈现。我以前用过 next，不记得遇到过这个问题。next/head_app.tsx

这是我的_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;

Run Code Online (Sandbox Code Playgroud)

因此，这里的元标记和标题显示在页面上，但位于<body>标记的顶部而不是在<head>

Answer 1

小智 5

我遇到了同样的问题：“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",
  },
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，11 月前
查看次数：	4333 次
最近记录：	3 年，9 月前

next/head 中的 Head 组件渲染为 &lt;body&gt; 而不是 &lt;head&gt;

next/head 中的 Head 组件渲染为 <body> 而不是 <head>