DEV Community

Cover image for How to preview a Next.JS app on a mobile device
timreach
timreach

Posted on

40

How to preview a Next.JS app on a mobile device

So you're building a mobile web app and you want to view it on an actual phone not a virtual one in your dev tools? No, you don't have to deploy! If you've ever used Create React App, running developer mode gives you simple instructions for doing this, however Next.JS $ yarn dev does not! Fear not, it is very simple...

1. Get your machine's IP address

# Linux/Mac
$ ifconfig

# Or Windows...
$ ipconfig
Enter fullscreen mode Exit fullscreen mode

2. Run your project

$ yarn dev
Enter fullscreen mode Exit fullscreen mode

3.Open browser on your phone

  • If your machine's IP is 192.168.0.69...
  • ...navigate to 192.168.0.69:3000 on your phone

It's as easy as that!

Top comments (4)

Collapse
 
mohamedalimahmoud profile image
Mohamed Ali

it works like a charm

Collapse
 
empflow profile image
empflow

make sure your computer and phone are connected to the same network (wifi, ethernet)

Collapse
 
eduardowaof profile image
Eduardo Fortuna • Edited

In Windows, use the IP in the "IPv4 Address" label.

Collapse
 
savics407 profile image
Victor Adighibe

This is not working for me

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay