When designing and developing new web apps, it's usually good advice to follow the mobile-first principle. The goal? Ensure critical information is always visible, while additional supporting elements can be added as more screen space becomes available.
Sure, browser developer tools let you simulate a mobile view. But let's face it: testing on a 27” monitor with a mouse doesn't match holding a 6” phone in your hand. The real mobile experience is different.
So, how can you truly test your Next.js app on a phone while developing (incl. Fast Refresh)? Easy! Here are two methods to access your Next.js dev server directly on your phone:
Option 1: Use a reverse proxy
This is my go-to method. It's quick to set up, reusable for future projects, and just works.
The most common type of proxy is the forward proxy, which sits between you (the client) and the internet.
A reverse proxy, on the other hand, is located between the server and the internet. This means you don't need to know the exact IP address of the server. This is particularly helpful if you have a dynamic IP address or don't want to check it every time. This way it lets us route all requests to the reverse proxy to localhost.
The tool I recommend for the reverse proxy? Ngrok. (Not sponsored - just a fan). Their free service is absolutely fine for our purposes:
Here's how you set up the reverse proxy:
- After signing up on Ngrok, follow their simple installation guide
- Claim your static web address, so it doesn't change every time you start their service
- The address will be publicly visible so it's good practice to secure it via OAuth
Here's an example where I'm using Google OAuth. You have to insert your claimed static web address and your email for Google OAuth and you're good to go.
yarn dev
ngrok http --domain=your-static-web-address.ngrok-free.app 3000 --oauth google --oauth-allow-email 'your@gmail.com'Note: I highly recommend disabling the automatic Standby. On iPhone: You have to go to Settings → Display & Brightness → Auto-Lock. On Android: Change the automatic under Settings → Display → Advanced → “Screen Timeout” or “Sleep”
Option 2: Explicitly set Hostname
Don't want to use third-party tools? This method is more hands-on but works just as well.
First of all you have to ensure that you have a static IP address. It's also possible with a dynamic one but more complicated which I won't cover here (see this Stack Overflow Answer).
Binding the dev server to your local IP address
- Find your local IP address. On Mac, use
ipconfig getifaddr en0 - Set your hostname explicitly using the -H flag
yarn dev -- -H <your_local_ip_address> - Access your dev server on your phone by visiting:
http://<your_local_ip_address>:3000
Note: You have to find your IP address every time you connect to a new network and thus your IP address changes.
Happy Coding ✌️