開発モードでだけ表示するコメント

方法

process.env.NODE_ENV で分岐すれば良い

mdx

{process.env.NODE_ENV === 'development' && (
  <div style={{ color: 'red' }}>
    開発モードでのみ表示されます（例：デバッグ情報など）
  </div>
)}

自分用テンプレ

デバッグ情報だけのために HTML で書くのが面倒なので、書いたまま出るようにしたい。

{` ... `} のように ` つきで囲ってるところがミソ (囲わないと改行が反映されない)

mdx

{process.env.NODE_ENV === 'development' && (
<pre style={{ color: 'gray' }}>
{`**** debug ****
- a
- a
`}
</pre>
)}