Next.js開発中、画面の表示をモバイル端末で確認する方法
2023.06.08
2024.05.02
この記事は約1分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.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のページに移動する
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信登録の解除はいつでも可能です）
関連記事
