[Feature Request] View the app "On Your Network"

[heyitsarpit]

View the app "On Your Network"

By default create-react-app make the app live on localhost as well as your network.
This would make it easier to test on mobile devices. Also the current way has the text mixing in with all the other details and becomes harder to find. I would be better to highlight somehow, maybe draw a box around it.

Edit: I opened a PR to solve this #22352

[ info ]  ready on http://localhost:3000

[Janpot]

create-react-app doesn't do anything special. It just shows you the IP address of your laptop on your local network. It uses the address package to do that in a platform-agnostic way. Looks like you're on a mac so to get it you can probably just do:

ipconfig getifaddr en0

and you should be able to use it to access the next.js app that's running on your laptop from anywhere else on your LAN.

[heyitsarpit]

I understand it can be done manually but it's a user experience thing. I usually open the links by simply clicking on them while in the terminal, Having it right there makes it so I don't have to go though the extra steps.

[roberrrt-s]

Bump for visibility, It's not that much effort to do the lookup, but it's way easier when debugging on several mobile devices.

[timneutkens]

It's marked as good first issue, feel free to implement @roberrrt-s.

[roberrrt-s]

Will try so somewhere in the next days, cheers!

[heyitsarpit]

Hey, saw the conversation happening here and was reminded of this issue so I decided to try to solve it myself. I've opened a pull request - #22352

[lucasengel]

create-react-app doesn't do anything special. It just shows you the IP address of your laptop on your local network. It uses the address package to do that in a platform-agnostic way. Looks like you're on a mac so to get it you can probably just do:

@Janpot are there any other steps to get this working? I tried simply adding the port to the end of local address and got a timeout.

[Abd-Alwahab]

what worked for me:-

192.168.0.101:3000

00-npm run dev
01-in your browser type 192.168.0.101:3000 (replace 192.168.0.101 with your laptop ip) , (3000 is nextjs default port)
02-to get your machine ip , in your terminal type ifconfig (mac) , ipconfig (windows) , you will see your ip in en0 options.

[revelt]

I tried simply adding the port to the end of local address and got a timeout.

If you're on a Mac, make sure to:

1. reference the IP from Network/Wi-Fi > "Status" section, something like 192.168.1.222 — the "Ethernet" section also has an IP but that's wrong IP — use the IP address from Wi-Fi section!;
2. also make sure your computer has wifi enabled, and
3. your mobile device is on the same wifi.

Abdullah's answer above does work for me.

[dance-cmdr]

Any idea why I might be getting

Unhandled Runtime Error 
Type Error: undefined is not an object (evaluating 'pages.includes')

Call Stack
promiseReactionCode
 [native code]

When I'm trying to test on my iphone?

It works locally.

[delzennejc]

This would be a great add, a quick win that decreases the need for me to come back here each time a need to use nextjs on mobile.

[HaNdTriX]

Workaround

$ npm i address --save-dev

And add the following code to your next.config.js

if (process.env.NODE_ENV === 'development') {
  console.log('info  - lanUrl:', `http://${require('address').ip()}:3000`)
}

[kylemh]

If I wanted to tackle this issue, I'd need to basically re-implement all of this package anyways to find the correct IP address in a cross-platform and safe way.

This is marked as good first issue, but I'm assuming the Next.js team would be opposed to installing address as a devDependency... Is that the case? I guess, in defense of disallowing the install of address, it can probably be written in less bytes and the package hasn't really changed since 2017, so there's no argument to install the package for future updates. I just wanted to check in before I tackle this.

[heyitsarpit]

If I wanted to tackle this issue, I'd need to basically re-implement all of this package anyways to find the correct IP address in a cross-platform and safe way.

No need, my pull request #22352 implements a getNetworkHost function that handles this.

To get the correct behavior, I studied the source code of address and vite. My implementation in particular was based on vite's server code.

[kylemh]

Ah! Sweet. Thanks for stopping me. Great work!

[theabhayprajapati]

is am not able to use this on my phone (other LAN devices) any suggestions,
steps I did

• 00: checked my local IP addresses with ipconfig;
• 01: start the npm server;
• 02: tried to move on that URL from other LAN devices,
• 03: got timeout⌛

http://192.168.0.105:3000/ is working on a laptop where the next.js server is not on other LAN devices.

[ferdiamg]

Same for me, and tried exactly the same steps as @theabhayprajapati

[bm9avan]

I found my local network ip4 address and opened my next.js webpage on my laptop, but I was unable to open on my mobile which is connected to the same local network; any solution to open on my mobile with live changes

[TheJazzDev]

I found my local network ip4 address and opened my next.js webpage on my laptop, but I was unable to open on my mobile which is connected to the same local network; any solution to open on my mobile with live changes

This will work on nextjs
#11367 (comment)

[mickdewald]

Here is my solution

In WSL
remember inet 172.21.161.29

❯ ifconfig
eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1492
        inet 172.21.161.29  netmask 255.255.240.0  broadcast 172.21.175.255
       ...

On the Windows host
remember IPv4 Address. : 192.168.178.40

❯ ipconfig
...
Wireless LAN adapter WiFi:

   Connection-specific DNS Suffix  . : fritz.box
    ...
   IPv4 Address. . . . . . . . . . . : 192.168.178.40

Put all together on the Windows host (must be admin)

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=192.168.178.40 connectport=3000 connectaddress=172.21.161.29

Now you can type
192.168.178.40:3000 on your phone on the same network and connect to Windows which forwards to WSL2

[codigoisaac]

Hey guys. I was able to access my next.js app through my android phone by setting my wi-fi network profile to 'private' in windows config. And then accessing "192.168.1.3:3000". I was not able to do it while the network profile was public.

In windows go to: Settings > Network and internet > Wi-fi > Manage know networks > [choose your wi-fi network] > [change the network profile to 'private'].

[memcaliber]

Hi.. I hope this case can still be discussed..
in my case, I used the command npm run dev -- -H 192.168.100.56 where 192.168.100.56 is the local IP in the LAN network. This method works, and displays the login page at http://192.168.100.56:3000/login.

when I press the login button, I am again redirected to http://localhost:3000/auth/login instead of http://192.168.100.56:3000/auth/login.

How do we make Next JS always point to the IP that we have specified?

I'm using NextAuth, here is the simple code for my simple application:
export const authOptions: NextAuthOptions = { sessions: { strategy: "jwt" }, secret: process.env.ENV_LOCAL_VARIABLE || 'something-secret', providers: [ Credentials({ credentials: { name: { placeholder: "Try Steve or Jane" } }, authorize: info => validUsers.find(user => user.name === info?.name) || null }) ], callbacks: { session: ({ session, token }) => ({ ...sessions, user: getUserById(token?.sub) }) } };

[samcx]

Hi everyone!

Since this is a feature request, I will be moving this to our discussions.

No to worry—the number of reactions, comments etc. will stay so this feature request will still be top of mind!