Menu
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
578
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.
151
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.
32
I had the same issue and it was related to the <html lang="en" /> inside the <Head> tag.
3
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
