Intellij IDEA Ultimate, Webstorm Next.js Debug

必要性
Next.js SSR+CSRを理由にサーバとクライアントをそれぞれ登録する.開発では、各行、変数出力コンソールに基づいて開発できますが、Intellij Ultimateを購入するのに大金を使った場合は、よく使いましょう.
intellijのRun/Debug Configuration設定を使用して、serversideとclint sideはintellij debug consoleで改行をクリックします.
しかし、私は英語でどこまで書くか分からない.ハングルでどこまで書くか分からない.
プロジェクトの構成
テスト項目の作成
既存のプロジェクトに適用されます.

npx create-next-app@latest --ts

Run/Debug構成設定の追加
npmではなくintellijで直接実行します.
next dev設定を追加します.SSR debugnode interpreterプロジェクトで使用されるノードイニシエータ使用プリファレンス.Javascript file nextjsの実行可能ファイルを直接指定します.

ブラウザのデバッグ設定を追加します.CSR debugURLはnextjsページに接続するurlに設定されている.

Debug
nextjsとbowser debugモードをそれぞれ実行すると、
ブラウザでページに接続すると、統合されたデバッグモードを使用できます.
next.jsデバッグモードの実行

ブラウザデバッグモードの実行

デバッグコンソールの確認
サーバ上で実行されるgetServerSideProps関数のデバッグコンソールを使用できます.

次に、ブラウザで実行されるuseEffect関数のデバッグコンソールを使用することができる.

ブラウザもローで停止します.

の最後の部分
node.jsのプロジェクトの半分の構成/設定...next.jsはtypescriptをサポートし、設定を必要としないため、プロジェクト構成がより便利になりますが、SSRもCSRも注意が必要です.この場合、IDEをうまく利用すれば、作業時間を短縮できます.
もちろん、いくら使っても気持ちがいいですよ.

誰がVscodeの声を出したの?
:wq