PC 上では整って見えるのに、スマートフォンで開くと余白や文字組み、固定ヘッダーの挙動が変わる。これは Next.js 開発でも日常的に起きます。だからこそ、公開前に実機で確認できる状態を早めに作っておく価値があります。
まず確認すること
前提はシンプルです。開発用 PC とスマートフォンを同じ Wi-Fi に接続し、PC のローカル IP アドレスを確認します。Windows なら ipconfig、macOS ならシステム設定のネットワーク、またはターミナルの ifconfig で確認できます。
2026 年時点の Next.js で変わった点
古い解説では package.json の dev スクリプトを "next -H 0.0.0.0" に変える手順がよく紹介されていました。ただ、2026 年時点の Next.js CLI では next dev のホスト既定値は 0.0.0.0 です。つまり、標準の dev 起動でそのまま LAN 内から見られるケースが増えています。
それでもアクセスできない場合は、開発サーバーを明示的に全インターフェースで待ち受けさせます。npm なら npm run dev -- --hostname 0.0.0.0、pnpm や yarn なら next dev --hostname 0.0.0.0 のように指定しておくと切り分けがしやすくなります。
スマホからの開き方
たとえば PC のローカル IP が 192.168.1.5 でポートが 3000 なら、iPhone でも Android でもブラウザで http://192.168.1.5:3000 にアクセスします。PC 側のファイアウォール設定が厳しい場合は、その許可も必要です。
実機確認で特に見ておきたいのは、フォントレンダリング、100vh 周辺の高さ計算、固定フッターやメニューのタップ領域、フォーム入力時のズーム、画像最適化後の見え方です。PC エミュレーションで問題がなくても、実機でだけ崩れる箇所はまだ残ります。
セキュリティ上の注意
ローカルネットワークに開いた開発サーバーは、あくまで確認用です。公共 Wi-Fi では使わないこと、不要になったらすぐ止めること、認証や API キーを開発用に分離しておくこと。このあたりは地味ですが、運用事故を減らします。OAuth、Secure Cookie、Service Worker など HTTPS 前提の検証が必要なら、開発用 HTTPS を使う判断も早めにしておくと後戻りが減ります。
日本向けサイトでは、見た目の完成度だけでなく、スマホでの読みやすさや入力しやすさが検索評価と直結しやすい場面があります。実機確認まで含めて開発フローを整えたい場合は、rePlay の SEO サービスや、お問い合わせからご相談ください。
