Next.js開発画面をモバイル端末や他のパソコンでも共有する方法

blog-hero-img同じWiFiネットワークに接続している場合、開発画面を複数端末で簡単に共有できます

pen-icon2023.06.08

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

複数端末で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を習得】

1759円0円

Amazonのページに移動する