Next.js開発中、画面の表示をモバイル端末で確認する方法

Next.jsの開発画面を共有する方法

Next.jsをパソコンで開発中、モバイル端末での表示を確認したいときがあります。

パソコンとモバイル端末が同じWiFiネットワークに接続しているときは、下記の方法で簡単に確認できます。

最初に現在のWiFiのIPアドレスを取得します。

ターミナルに次のコマンドを打ち、「Enter」で実行してください（Macの場合）。

ipconfig getifaddr en0

現在つながっているIPアドレスが次のように表示されます（下記は私の現在のIPアドレス）。

142.11.0.3

この数字をコピーしたら、次にVSコードなどのエディターのターミナルに、下記Next.js起動コマンドを打ちましょう。

-H以降のコマンドがIPを指定するものです。

npx next dev -H 142.11.0.3

起動が完了するとターミナルにはhttp://142.11.0.3:3000のようにURLが表示されるので、これをモバイル端末で開くと、変更を確認しながら開発を進められます。

これはモバイル端末だけではなく、同じWiFiネットワークにつながっているパソコン、タブレットなどでも同じ画面が表示されるので、開発時の共有に非常に便利です。

（参考：nextjs.org/docs/pages/api-reference/next-cli#development）

なおNext.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。

はじめてつくるNext.jsサイト

【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】

1848円 → 0円

Amazonのページに移動する