Localhost is convenient while building, but it does not behave like a real public URL when you need to test on a phone, share a preview with a teammate, or verify webhook callbacks. Ngrok solves this by creating a secure tunnel from the internet to a port running on your machine.

The Traditional Approach

Before using a tunnel, developers often try to connect a phone to the same Wi-Fi network and manually type the computer's local IP address with a port number. That can work, but it is fragile: firewalls, corporate networks, HTTPS requirements, and browser permissions can all get in the way.

• The phone can open a normal HTTPS URL.
• You can test third-party callbacks that require a public endpoint.
• The preview URL can be shared temporarily without deploying the app.

Using Ngrok

Create an account at ngrok.com, install the CLI, and connect your account with the auth token from the dashboard.

# MacOS
brew install ngrok/ngrok/ngrok

# Windows
choco install ngrok

# Linux
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
  | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
  && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
  | sudo tee /etc/apt/sources.list.d/ngrok.list \
  && sudo apt update \
  && sudo apt install ngrok

This command requires specific package managers installed on your machine (Homebrew for MacOS, and Chocolatey for Windows).

Step 1: Run Your Local App

npm install
npm run dev

Most Next.js apps start on port 3000. Keep this terminal running because ngrok forwards traffic to the process listening on that port.

Step 2: Configure Ngrok on Your Machine

ngrok config add-authtoken YOUR_AUTH_TOKEN

Step 3: Start a Tunnel

ngrok http 3000

Ngrok prints a forwarding URL. Open that HTTPS URL on your phone and you should see the same app that is running locally on your laptop.

Save Ngrok Executable File Path to Environment Variables

On Windows, you may need to add the ngrok executable directory to your PATH so the command works from any terminal. After updating PATH, close and reopen your terminal before trying the command again.

Common Errors

• If the page is blank, confirm your local server is still running.
• If your app rejects the tunnel host, add the generated ngrok domain to your allowed hosts or callback URLs.
• If the mobile device cannot load the page, restart the tunnel and copy the newest forwarding URL.

Summary

Ngrok is the fastest way to get a realistic mobile preview without deploying. Start the local server, open a tunnel to the right port, and use the generated HTTPS URL from your phone.