Localhost 与公网访问
9.2 局域网真机调试
Tip
模拟器是美好的童话，真机才是残酷的现实。
1. 为什么要学这个?
你在 Chrome 的"手机模式"下调试得很完美：点击流畅，布局完美。
你信心满满地上线了。
老板拿出 iPhone 一试："为什么这个下拉菜单点不开？"
你一查，发现你用了 :hover css 属性。
电脑有鼠标，能悬停；手机只有手指，要么点，要么不点，不存在"悬停"。
这种"鼠标思维"导致的 Bug，模拟器测不出来。你必须把网站跑在真机上。
2. 核心概念：0.0.0.0 vs 127.0.0.1
想让手机访问电脑，必须这就得过两关：
第一关：耳朵朝外 (Listen)
默认情况下 (localhost)，Next.js 只监听内部声音。
我们需要把监听地址改为 0.0.0.0。
127.0.0.1: "我不听我不听"，只听自己的。0.0.0.0: "来者不拒"，监听所有网卡（Wi-Fi, 网线）。
第二关：找到门牌 (IP)
你的电脑在局域网里也有一个身份证，通常是 192.168.x.x。手机要通过这个地址找到你。
3. 解决方案 (HOW)
第一步：让 Next.js 敞开大门
修改 package.json，把启动命令改一下：
"scripts": {
"dev": "next dev -H 0.0.0.0"
}
(注：-H 0.0.0.0 就是告诉 Next.js：别害羞，向全网广播。)
第二步：查找电脑 IP
- Windows: 打开终端输入
ipconfig，找到 IPv4 地址。 - Mac/Linux: 输入
ifconfig或ip a。
第三步：真机访问
确保手机和电脑连在同一个 Wi-Fi 下。
手机浏览器输入：http://192.168.1.5:3000 (假设你的电脑 IP 是 192.168.1.5)。
4. 真实案例
Story
星巴克的"隐形墙"
某自由职业者在星巴克写代码，想给对面的客户演示 Demo。 他自信地让客户连上星巴克 Wi-Fi，输入了自己的 IP。 转圈圈，连不上。 他以为是代码挂了，排查了半小时。
真相： 公共场所 (星巴克、机场) 的 Wi-Fi 通常默认开启 AP Isolation (接入点隔离)。 为了安全，路由器禁止连接在同一个 Wi-Fi 下的设备互相说话（防止黑客扫描你的电脑）。
Vibe 心法：局域网调试是性价比最高的真机验证手段。但在公共网络下，手机热点才是你最值得信赖的局域网。
5. 本章小结
- 必须要真机：触感、震动、刘海屏，这些是模拟器模拟不出来的。
- 监听全网：
next dev -H 0.0.0.0是真机调试的标配。 - 网络隔离：如果连不上，先检查是不是用的公共 Wi-Fi，或者防火墙没关。