在网络上运行NextJS开发服务器

Question

在使用ReactJS时，当我们使用npm start命令时，它会在localhost:3000和192.168.1.2:3000的网络上启动开发服务器。这非常容易，我可以通过进入该地址在所有设备上测试我的应用程序。

最近我开始学习NextJS，当我运行npm run dev命令时，我只看到它在本地机器上启动了开发服务器，而没有在网络上。有没有办法让它像纯ReactJS一样工作？

- WildThing

---

对我来说，问题在于我在WSL2中运行了nextjs。我需要遵循这个线程：https://dev59.com/JlIH5IYBdhLWcg3wI5oj - Guerrilla

Answer 1

它还会监听您的本地IP地址，只需找出您的本地IP地址并执行“192.168.1.x:3000” - 这将是您的IP地址，您将看到该服务器在该端口上运行。

查找本地IP地址： 打开终端并运行ipconfig(Windows)或ifconfig(MacBook)命令。您将看到当前连接的网络，IPv4地址是当前的本地IP地址。

- Deepinder Singh

---

尝试过了，但在本地IP上无法工作。不得不手动运行npm run dev -- -H 192.168.x.x。此外，ifconfig无法使用，必须使用ip addr show。 - nxoo

对于 Windows 系统，请确保您的设备在“网络配置文件”>“专用”下可见。如果设置为“公共”，则无法找到您的设备。 - wamaro

在Windows上，我必须禁用“专用网络”上的防火墙，并将WiFi的“网络配置文件”设置为“专用”。 - Avinash Thakur

在Windows上，我在Defender中打开了端口，但仍然没有成功。这种方法是否假设使用ipconfig识别的IP地址是一个WiFi适配器？我的开发机器通过以太网连接到路由器上，正在本地主机上运行网站，我正在尝试从连接到同一路由器的移动设备上访问它。 - Darren Evans

@AvinashThakur的评论指引我朝着正确的方向前进，而这篇文章帮助我解决了问题。我将我的电脑连接设置为私人Wi-Fi，这样我的手机就能找到它了 :) - undefined

Answer 2

如@Deepinder Singh所提到的，Next.js开发服务器已经在您的本地网络上进行监听。

要获取您的本地网络IP地址，请运行以下命令。（仅在Mac上测试过）

ipconfig getifaddr en0

编辑

对于macOS用户，请使用以下命令，它将打印出您的私有IP地址，如"私有IP地址：192.168.1.45"

echo "Private IP address:" $(ifconfig $(route -n get default | awk '/interface: / {print $2}') | awk '/inet / {print $2}')

对于 Linux 用户，使用以下命令：

echo "Private IP address:" $(ip addr show $(ip route | awk '/default/ {print $5}') | awk '/inet / {print $2}' | cut -d/ -f1)

对于 Windows 用户，我建议您改用基于 Unix 的操作系统 :)

- Ammar Oker

Answer 3

Mac/Linux

要轻松找到本地IP地址，您可以使用以下方法：

ifconfig | grep 'inet '

如果你在同一个网络下，只需导航到 http://YOUR_LOCAL_IP:3000

- Ben Winding

Answer 4

我知道你可能会对看到的地址“0.0.0.0”感到困惑。请打开终端并使用以下命令检查您的本地IP地址

ipconfig

然后检查您看到的IPv4地址，使用它代替“0.0.0.0”，然后就可以愉快地使用了。例如，“192.168.43.131:3000”。

- HyOcee

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 5

为了连接其他设备进行调试，请确保两个设备连接到同一个网络（WiFi）。

• 搜索您所连接的网络的IP地址，在我的情况下，我正在使用Mac，您可以在终端中输入以下命令：
  ipconfig getifaddr en0

• 在您的Nextjs项目中以这种方式运行项目：
  npm run dev -- -H /your_ip_address/
  例如 - npx next dev -H 192.168.1.2

了解更多信息- NextJS文档

愉快编码 :)

- Hafiz

Answer 6

除了以上的回答外，MacOS和受欢迎的Linux发行版将使用您的本地主机名并通过mDNS进行广播。

例如，如果您的主机名是meow，您的Next.js开发服务器位于localhost:3000，那么您可以通过本地网络上的另一台设备访问服务器，地址为meow.local:3000。

- Meow