Warning: next-head-count is missing

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

JavaScript
​x
 
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

JavaScript
 
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
​

Answer

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.

Advertisement

Answer