[Next.js] console.log()でコンソールに出力されない時の確認事項

Next.jsにはサーバーコンポーネントとクライアントコンポーネントがあります。サーバーコンポーネントで書いたコードはサーバー、クライアントコンポーネントで書いたコードは、クライアント(Webブラウザ)で実行されます。

広告

クライアントコンポーネント

クライアントコンポーネントに書いたconsole.log()の出力は、Webブラウザのデベロッパーツールのコンソールに表示されます。ChromeならF12でデベロッパーツールを表示できます。

サーバーコンポーネント

ローカル環境

ローカル環境の場合、サーバーコンポーネントに書いたconsole.log()の出力は、エディタのターミナルに表示されます。VSCodeでは、ツールバー>Terminal>New Terminalでターミナルを表示できます。

本番環境

本番環境の場合、ホスティングサービスのログに表示されます。Vercelでは[Logs]タブに表示されます。