Next.js Discord

Discord Forum

Can't access localhost project on smartphone browser

Answered
Blanc de Hotot posted this in #help-forum
Open in Discord
Avatar
Blanc de HototOP
I want to see the project in my phone but it just doesn't load when i put the ip in the browser.
I've tried doing "npx next dev -H ..." instead of just trying to access my computers ip, and yes i'm including the port at the end and it just says err_connection_refused in the phones browser.
Does anyone know a wait to fix this?
Answered by not-milo.tsx
To change it follow these instructions:

1. Select Start , then type settings. Select Settings > Network & internet > Wi-Fi.

2. On the Wi-Fi settings screen, select Manage known networks, and select the network you're connected to.

3. On the Wi-Fi network screen, under Network profile type, select Public (Recommended) or Private.
View full answer

29 Replies

Avatar
American Bobtail
@Blanc de Hotot try using ngrok, install it, in terminal run ngrok http port u r using ex:3000, take the link and access it from ur phone
Avatar
Blanc de HototOP
thanks, is there a reason why it doesnt work without it?
Avatar
Blanc de HototOP
i appreciate the answer, but is there a way to fix it instead of going around it? @American Bobtail
Avatar
American Bobtail
@Blanc de Hotot tbh I never tried the command you mentioned, I’ll give it a try later and see if I encounter any problem. Because I usually use ngrok
Avatar
Blanc de HototOP
make sure you replace the ... with an ip in the command i mentioned @American Bobtail
Avatar
This is something that has always worked for me:

1. Run ifconfig in your terminal
2. Grab the inet ip from either your wireless or ethernet connection
3. Put it in your phone's browser followed by the dev port your server is running on

If you already did this and it's not working then sorry, I might have misunderstood where the problem is.
Avatar
Blanc de HototOP
would the inet ip be the ipv4? @not-milo.tsx if so yeah it doesnt work for some reason. in create-react-app it worked just fine
Avatar
Yup, that's the one. I don't know if you need to change some configurations on Windows, but on Linux (I'm using Fedora 38) it works without needing any manual setup
Avatar
Blanc de HototOP
i have tried changing ip, changing port, changing browser and nothing worked
Avatar
Blanc de HototOP
for some odd reason, when i connect through an android emulator on my pc it does connect to the website just fine
Avatar
And running npm run dev -- -H 192.168.x.x didn't work either?
Avatar
Blanc de HototOP
yeah didnt work
Avatar
Are you on Windows?
Avatar
Blanc de HototOP
yes
Avatar
Check if your computer is visible on the network.

From a Microsoft support page:

When you first connect to a Wi-Fi network in Windows 11, it’s set as public by default. This is the recommended setting. However, you can set it as public or private depending on the network and what you want to do:

Public network (Recommended). Use this for networks you connect to at home, work, or in a public place. You should use this in most cases. Your PC will be hidden from other devices on the network. Therefore, you can’t use your PC for file and printer sharing.

Private network. Your PC is discoverable to other devices on the network, and you can use your PC for file and printer sharing. You should know and trust the people and devices on the network.
Avatar
To change it follow these instructions:

1. Select Start , then type settings. Select Settings > Network & internet > Wi-Fi.

2. On the Wi-Fi settings screen, select Manage known networks, and select the network you're connected to.

3. On the Wi-Fi network screen, under Network profile type, select Public (Recommended) or Private.
Answer
Avatar
Blanc de HototOP
i have it as public so yeah i should change to private
its weird bcus it worked just fine before with things not related to nextjs like xamp for example
gonna test it out
and it worked
i saw some stuff about that before but it was all about firewall blocking the ports and it didnt seem like that was the issue
thanks a lot man you're amazing
😻
Avatar
No problem 😉
Avatar
Blanc de HototOP
cant mark it as the answer idk why but thanks you
and i see you're answering to a lot of people on the server
you're amazing man
Avatar
Ahaha thanks!
Avatar
Blanc de HototOP
np