Next.jsでServer Sideのconsole.logを見る

Next.jsはSSRとかSSGとかでServerSideのロジックを書ける

その際にconsole.logでデバッグしたいときににどうするか

VSCodeのdebuggerを使う

準備

code:.vscode/launch.json

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Next: Node",

"runtimeExecutable": "npm",

"cwd": "${workspaceFolder}/src",

"runtimeArgs": "run", "debug",

"console": "integratedTerminal"

]

}

package.jsonに追記

code:package.json

"scripts": {

"debug": "NODE_OPTIONS='--inspect' next"

これは上記のlaunch.jsonのruntimeArgsに対応している

そのprojectのlocalhostをVSCodeから起動する

なので普段みたいにCLIで$ npm startはしない

VSCodeのサイドバーの虫アイコンをクリックし、上の▶をクリックするとサーバーが起動する

URLは普通に localhost:3000

VSCodeのターミナルに表示される

https://gyazo.com/fe2376b36e22dbdc22c6951e3833f234

ログを見る

ほしい値のところをbreak point設定したらそこで止まるので見れる

ブラウザのdev toolの、左上のNode.jsマークをclickすればサーバー側のdev toolが開かれる

こっちの方が楽mrsekut.icon

いつもどおりconsole.logを仕込む感じでやればいい

https://gyazo.com/a3dc2692a44a2ac56d8e5b80c35fdb06

ただしこのlogはサーバー側のものであることに注意

例えばComponents内にconsole.logを仕込むとlogが表示されるが、これはSSRによるもの

参考

docs