34

While using ReactJS, when we use the command npm start, It starts the development server on localhost:3000 and also on the network, 192.168.1.2:3000 This was super easy, I could test my app on all the devices by going into that address.

Recently I started learning NextJS and when I run the command npm run dev, I only see that it starts the development server on the local machine, not on the network. Is there a way to make it work just like it did with pure reactjs?

posting the screenshot, this is what it looks like with nextjs

WildThing
  • 969
  • 1
  • 12
  • 30
  • 1
    For me the issue was I was running nextjs in WSL2. I needed to follow this thread: https://stackoverflow.com/questions/61002681/connecting-to-wsl2-server-via-local-network – Guerrilla Nov 04 '22 at 01:45

6 Answers6

37

It also listens on your local IP, just find out your local ip and do "192.168.1.x:3000" -- this would be your IP , you will see the server running on that port.

To find local IP: Open your terminal and run the command ipconfig for windows or ifconfig for MacBook. You'll see the network you're currently connected to, the IPv4 address being the current local IP address.

Deepinder Singh
  • 729
  • 10
  • 18
  • 4
    Tried that and it wasn't working on local IP. Had to run it manually `npm run dev -- -H 192.168.x.x`. Also `ifconfig` not working, had to use `ip addr show` – nxoo Nov 30 '21 at 10:36
  • 2
    For Windows, make sure that your device is visible via "network profile" > "private". If set to "public", your device will not be found. – wamaro Jun 03 '22 at 11:32
  • 1
    On Windows, I had to disable Firewall on `Private Network` and set the WiFi's `Network Profile` to `Private` – Avinash Thakur Jul 12 '22 at 16:43
  • On Windows, I opened ports in Defender but still no joy. Does this method assume that the IP address identified using ipconfig is a WiFi adapter? My dev machine running the website on localhost is Ethernet wired to the router and I'm trying to access it from my mobile devices connected to the same router over WiFi. – Darren Evans Jul 22 '23 at 10:34
15

As @Deepinder Singh mentioned, Next.js dev server already listens on your local network.

To get your local network IP address run the following command. (tested only on mac)

ipconfig getifaddr en0

Edit

for macOS users, use the following command, it'll print your private ip address like "Private IP address: 192.168.1.45"

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

for Linux users, use the following command,

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

for Windows users, I recommand you to change to a unix-based OS :)

Ammar Oker
  • 689
  • 7
  • 17
7

Mac/Linux

To find your local IP easily, you can use:

ifconfig | grep 'inet '

enter image description here

Then if you're on the same network, just navigate to http://YOUR_LOCAL_IP:3000

Ben Winding
  • 10,208
  • 4
  • 80
  • 67
3

I can see you may be confused by the addres "0.0.0.0" you're seeing. But kindly go to your terminal and check your local ip address using the following command

ipconfig

then check the IPV4 address you see and use it instead of "0.0.0.0" and you're good to go.. for instance "192.168.43.131:3000"

HyOcee
  • 31
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 27 '22 at 15:44
2

For connecting other devices for debugging, make sure both devices are connected to same network (WiFi).

  • Search for the ip address of the network you are connected, In my case I'm using Mac, you can enter this command in the terminal :
    ipconfig getifaddr en0

  • In your Nextjs project run the project in this way:
    npm run dev -- -H /your_ip_address/
    for example - npx next dev -H 192.168.1.2

Explore more on - NextJS docs

Happy coding :)

Hafiz
  • 61
  • 4
1

In addition to the above answers, MacOS and popular Linux distros will use your local hostname and broadcast over mDNS.

For example, if your hostname is meow and your Next.js dev server is on localhost:3000 then you can reach the server with another device over the local network at meow.local:3000.

Meow
  • 1,610
  • 1
  • 14
  • 18