現在、Chromeを使うことでGUIベースでProfilerを使用することが可能になっています。
その方法の紹介です。
手順
Next.jsをProfilerを有効な状態で立ち上げる
Next.jsを立ち上げる際に次のようにNODE_OPTIONSをしてして起動してください。
NODE_OPTIONS='--inspect' next dev
ChromeのInspect画面を表示
chrome://inspect にアクセスすると、inspectorが利用可能です。
Devices > Remote targetにinspectオプションを有効にしたプロセスがリストされているので、inspect
リンクをクリックしてください
Profilingする
以上
後は開いたウィンドウのProfilerタブからCPUのProfile、MemoryタブからMemoryのProfileを取得できます。
参考