WSL2上で起動した開発サーバにWindows側からホスト名:ポート番号で接続できません

前提

WSL2上で起動したNext.jsの開発サーバにWindows側ブラウザからホスト名で接続したい。

npm run dev

のコマンドでWSL2上でNext.jsの開発サーバを起動し、

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

と表示されている。

Windows側のHostsに

127.0.0.1    local.test.jp

を追加し、http://local.test.jp:3000にアクセスすると
「このサイトにアクセスできません local.test.jp で接続が拒否されました。」
と表示される。
しかし、http://localhost:3000 にアクセスすると正しく表示される。

PowerShellで

Test-NetConnection local.test.jp

を叩くと

ComputerName           : local.test.jp
RemoteAddress          : 127.0.0.1
InterfaceAlias         : Loopback Pseudo-Interface 1
SourceAddress          : 127.0.0.1
PingSucceeded          : True
PingReplyDetails (RTT) : 0 ms

が表示され接続できるが、

 Test-NetConnection local.test.jp -port 3000

とすると

警告: TCP connect to (127.0.0.1 : 3000) failed


ComputerName           : local.test.jp
RemoteAddress          : 127.0.0.1
RemotePort             : 3000
InterfaceAlias         : Loopback Pseudo-Interface 1
SourceAddress          : 127.0.0.1
PingSucceeded          : True
PingReplyDetails (RTT) : 0 ms
TcpTestSucceeded       : False

と表示されTCP接続に失敗する。