so I created a website with Next.js and deployed it to vercel.
Everything works perfectly, but the only issue that I'm having is that when I'm connected to mobile data, the website doesn't open. However, when I switch to wifi it opens perfectly. I know mobile data works because I can navigate to any other site with data but can't open my site. This doesn't occur for everyone. So far it's happening to me and one other person I know off.
The site loads for a while then I get this message/error
but as soon as I switch back to wifi and reload the page, it loads perfectly. I've tried using chrome and firefox on mobile as well and its the same issue. So I don't think it has anything to do with browser compatibility.
Just to test something. I created a base Next.js app and deployed it to vercel. The same issue occurs as well. Opens on wifi but not mobile data. So I don't think it has anything to do with my code.
link to a test site that's having the same issue as well
https://static-site-sigma.vercel.app/
It's just a static site, but the same issue is occuring
What could be causing this?
Your website is probably running in a local network server or your local computer, so your mobile connection has no access to this network.
For example, if the URL is something like:
http://localhost/
http://127.0.0.1/
http://10.0.0.*/
http://192.168.*.*/
or any other local/private URL/host, it will not open on your phone using mobile data (see https://en.wikipedia.org/wiki/Private_network)
To make it work on mobile data, the site must be publicly available (public IP/host)
If you deployed the site to vercel, use the pubic URL of the vercel app.