54

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

1

10 Answers 10

59

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.

5
  • 6
    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
    Commented Nov 30, 2021 at 10:36
  • 4
    For Windows, make sure that your device is visible via "network profile" > "private". If set to "public", your device will not be found.
    – wamaro
    Commented Jun 3, 2022 at 11:32
  • 3
    On Windows, I had to disable Firewall on Private Network and set the WiFi's Network Profile to Private Commented Jul 12, 2022 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. Commented Jul 22, 2023 at 10:34
  • @AvinashThakur comment's pointed me to the right direction, and this article helped me resolve the issue. I changed the connection of my pc to the wi-fi to private and my phone could find it :) Commented Sep 7, 2023 at 16:00
24

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-like OS :)

10

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

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"

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.
    – Community Bot
    Commented Aug 27, 2022 at 15:44
3

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 :)

3

-H option in Next.js binds the development server to a single IP address.

If you want access the server via 127.0.0.1 (local) and 192.1.2.3 (network)

Run command

next dev -H 0.0.0.0

With this setup:

Access the server locally via http://127.0.0.1:3000

Access the server on your network via http://192.1.2.3:3000

In console log you can see

$ next dev -H 0.0.0.0
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000
  - Network:      http://0.0.0.0:3000
  - Environments: .env

Don't worry for http://0.0.0.0:3000 , you can now access via http://192.1.2.3:3000

Be carefully 192.1.2.3 is example IP. Check your ipv4 with run command in terminal

ipconfig
2

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.

0

try this in 2024

 npm run dev -- -H 0.0.0.0 -p 3000
1
  • 1
    Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? Commented Nov 4 at 0:23
0
  1. Type this command in terminal and get you machine IP

For Linux/Mac $ ifconfig

or for Windows $ ipconfig

img

  1. Start your project npm run dev or yarn dev

  2. Open the browser in mobile

  • if the machine ip is for example 192.168.0.2020 enter this in URL search bar
  • after the IP address 192.168.0.2020 put a port number like :3000
  • The final address would be like this 192.168.0.2020:3000

Note: Make sure your mobile and laptop/pc are connected to the same network/wifi.

1
  • Hi, please read how to answer. This content is already mentioned in the other answers
    – pierpy
    Commented Nov 10 at 17:37
0

Step 1

For Mac/Linux => ifconfig | grep 'inet'

put this command in your terminal after you see the list of the IP address copy this


For Window =>

  • Right-click the Windows Start menu and select Run.

  • Type cmd in the search field and click OK.

  • In Command Prompt, type ipconfig and hit Enter. Scroll to IPv4 Address to see your local IP address.`

enter image description here

Step 2

npm run dev --host Run this command in your terminal and this command will run you app in locally and network as well.

For show the running app in network http://<YOUR_IP_ADDRESS>/3000

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.