'Head component from next/head renders into <body> instead of <head>

I am setting up a project in nextjs. I would like to add some global meta tags and title to the project. I used the Head component from next/head in _app.tsx but they are being rendered in the body instead of the head both on localhost and when deployed using vercel. I have used next before and can't remember running into this issue.

Here is my _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;

So the meta tag and title here are showing up on the page, but at the top of the <body> tag instead of in <head>

next.js meta-tags

Solution 1:^[1]

Consider the structure of this example from the nextjs documentation.

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

The main differences that I see, is that in the documentation they place both head and body as siblings within <Html> tags. I suspect that is your problem. I would also remove the empty <> and </> tags.

You have the line: <html lang="en" /> Inside the Head tag. This is going to make it challenging for next to generate the correct html as the html tag is generally above both Head and body tags.

Solution 2:^[2]

I had the same problem with next: "11.1.2". Removing <html lang="en" /> fixed the problem. I added the lang value back using: (https://melvingeorge.me/blog/set-html-lang-attribute-in-nextjs)

/* next.config.js  */
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};

Solution 3:^[3]

Place <html lang="XX"/> as the last child of <Head>.

Example:

<Head>
  <title> Erika's Dog Training</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" name="viewport" />
  <html lang="en" />
</Head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	axwr
Solution 2	Eli
Solution 3	Eduardo Procópio Gomez

'Head component from next/head renders into <body> instead of <head>

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]