WSLから起動したNextjsをスマホで確認する方法

やりたいこと

WindowsのWSLで開発をしていて、レスポンシブデザインを実機で確認したくなりました。
PCに直接開発環境を作った場合、同じWiFiにつないでPCのローカルIPアドレスを入力すれば確認できますが、WSL環境から起動した場合は少し手間がかかります。
自分のメモ用に記事にしておこうと思います

手順

1. PowerShellでwindows端末のローカルIPを取得

powershell

ipconfig

2. WSL側のアドレス取得

hostname -I

3. ポートフォワーディング(転送)設定登録

netsh.exe interface portproxy add v4tov4 listenaddress={windows側のIP} listenport={ポート番号(今回は3000)} connectaddress={WSL側のアドレス} connectport={ポート番号(今回は3000)}

4. 実機で確認

ここまできたらスマホから確認ができるはずです

5. ポートフォワーディング(転送)設定削除

netsh.exe interface portproxy delete v4tov4 listenport={ポート番号(今回は3000)} listenaddress={windows側のIP}