如何在Next.js中添加注释并在开发者工具中查看？

• 你在_document.js里写的JSX注释（{/* ... */}）不会被渲染到最终的HTML中，因为Next.js编译时会自动剔除这类代码层面的注释，所以开发者工具里看不到。
• 要添加能在浏览器开发者工具元素面板中显示的HTML注释，需要用dangerouslySetInnerHTML插入原生HTML注释，具体写法如下：

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

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

• 也可以把注释放在Html标签内，写法类似：

<Html lang="en">
  <div dangerouslySetInnerHTML={{ __html: '<!-- Welcome developers! -->' }} />
  <Head />
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

• 原理是dangerouslySetInnerHTML会把传入的HTML字符串直接渲染到页面中，原生的HTML注释会被浏览器保留，自然就能在开发者工具里看到了。
• 如果你只是给访客留言，也可以在任意页面组件中用同样的方式插入注释，效果一致。

内容的提问来源于stack exchange，提问作者pete