Warning: next-head-count is missing

Question

I'm using a custom _document.js from Next documentation. In result, I keep getting a warning message printed out to the console. I've tried to restart my server and emptied my browser's cache. My _document.js is inside a "pages" folder as it should be. I made sure that the file is being readen by adding some tags to my <Head> and inspecting my website to see if the tag is being added to the <Head>. (My website is working correctly I'm just tired of this warning message.)

Console warning:

Warning: next-head-count is missing. https://err.sh/next.js/next-head-count-missing

This is my _document.js file:

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>
          <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Your `_document.js` looks fine to me. Have you tried removing the `.next` folder and start the dev server again? — hangindev.com, Jun 16 '20 at 02:38
I tried removing node_modules and .next folders. I just found a solution and posted it below. Anyway thanks for your help! — Michal K, Jun 17 '20 at 06:42

score 11 · Answer 1 · answered Mar 18 '21 at 12:23

11

This error also shows up when an unsupported html tag is entered added into the <Head> tag.

In my case I had accidentally added a <p>...</p> tag within the <Head>...</Head> tag in a component, which was throwing this error.

answered Mar 18 '21 at 12:23

Rishit Sinha

425
3
6

score 5 · Accepted Answer · answered Jun 17 '20 at 06:40

5

Apparently I had a <head> tag inside index.html as well. After removing it the error was gone. There is nothing wrong with my _document.js. I was importing style in a separate <head> inside index.js, that's why the error occurred.

Solution: I moved <head> content from index.js to _document.js and removed the <head> tag from index.js.

answered Jun 17 '20 at 06:40

Michal K

213
2
3
10

1

i have the same issue but this solution doesn't work for me...any suggestions ? – Aakash Chauhan Aug 11 '20 at 08:04
3

In my case I had a `` inside a `next/head` Head element. apparently is not supported, to change the lang attribute. – itsjavi Feb 28 '22 at 23:38
Hey @itsjavi were you able to figure out an alternative to that? facing the same issue – Satyaki Das Oct 25 '22 at 15:36

score 5 · Answer 3 · answered Mar 19 '22 at 19:18

5

I had the same issue and it was related to the <html lang="en" /> inside the <Head> tag.

answered Mar 19 '22 at 19:18

Netinel

101
1
2

score 2 · Answer 4 · answered Nov 29 '21 at 17:32

2

In my case, there was an incorrect html tag inside next's Head component. 90% of this error means that something wrong with the content inside Head. Try to remove elements inside Head one by one and you will find what causes the issue.

answered Nov 29 '21 at 17:32

A. Askarov

625
7
13

score 1 · Answer 5 · answered Jul 11 '21 at 16:33

In my case, the Head component imported from next/Document was in the custom _document, but it was within the body tag, moving it within the Html component and outside of the body tag fixed it.

// Incorrect
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <body>
          <Head />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


// Correct
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

score 1 · Answer 6 · answered Oct 11 '21 at 15:18

1

In my case "Convert HTML to JSX" vscode extension added a wrapper div tag in the next/head component. I removed div tag and the warning gone.

answered Oct 11 '21 at 15:18

M.Islam

1,184
2
13
16

score 0 · Answer 7 · edited Jan 02 '22 at 14:30

0

For me, I had a custom component <MobileView> in the <Head>. So changing that did the trick.

edited Jan 02 '22 at 14:30

cigien

57,834
11
73
112

answered Jan 02 '22 at 09:15

Leo Getz

69
1
2

Warning: next-head-count is missing

7 Answers7