Next.js開発画面をモバイル端末や他のパソコンでも共有する方法
2023.06.08
この記事の筆者：三好アキ（ウェブエンジニア）
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
複数端末で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月）リリースした下記書籍を参考にしてください。
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談
