iPhoneでNext.jsのlocalhostをデバッグしたい

概要

Macで開発中のNextjsの開発環境（localhost）をiPhoneで確認する方法の説明

※ MacとiPhoneは同じネットワークに繋げる必要があります

方法

手順1：ホストを指定してNextjsを起動

以下のようにhostnameを追加しておく

package.json

  "scripts": {
    "dev": "next dev --hostname 0.0.0.0",
 ...

その後、Nextjsを立ち上げる

ターミナル

npm run dev


例
$ npm run dev                   

> test-app@0.1.0 dev
> next dev --hostname 0.0.0.0

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

手順2：MacのIPアドレスを調べる

「システム設定」＞「Wi-Fie」＞接続しているWifi名の「詳細...」をクリックして以下の「TCP / IP」画面を確認
赤枠で囲ったIPアドレスを覚えておく

手順３：iPhoneのブラウザで確認

同じWifiに繋いでいるiPhoneのブラウザで以下のURLを入力する

http://{手順２のIPアドレス}:{Nextjsを立ち上げているポート番号}

今回の例だとIPアドレスが「192.168.11.2」でNextjsの立っているポートが「3000」なので以下のURLになる
http://192.168.11.2:3000

以上でコード上で修正を加えた時もhot reloadが効いてリロードしなくても変更が反映されるようになる