How to add comment to Next.js and see it in developer tools?

April 8, 2023

If I add comment to HTML file, I can see this comment in developer tool in element section, correct? But how can I add comment in Next.js app? I cannot find html file.

I was trying to add comment in _document.js folder, but I dont see comment in dev tool.
I would like to write message for visitors of website.
Thank you.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
       {/* Welcome developers! */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

>Solution :

You can add this normal browser head tag to the beginning of your document BEFORE your NextJS Head tag, and the Head tag will append all of it’s content to your comment.

export default function Document() {
  return (
    <Html lang="en">
      <head dangerouslySetInnerHTML={{ __html: '<!-- Welcome developers! -->' }}>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

If you need it to be in your body, one way to do this would be to have it in a script tag, like this:

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <script dangerouslySetInnerHTML={{ __html: '<!-- Welcome developers! -->' }}>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Source: https://github.com/vercel/next.js/issues/3904