How to Access Next.js and Laravel via IP on Same Wi-Fi

By Posted on

When developing a full-stack application using Next.js and Laravel, both servers run on localhost (127.0.0.1) by default. This prevents other devices, such as smartphones or secondary laptops, from accessing the application—even if they are connected to the same Wi-Fi network.

This tutorial will guide you through configuring both your Frontend and Backend to communicate and be accessible across your local network.

Step 1: Find Your Computer’s Local IP Address

Before starting, you need to know the local IP address of the computer acting as your server.

  1. Open a new Terminal on your computer.
  2. Type the command corresponding to your OS:
    • Windows (PowerShell/CMD): ipconfig (Look for IPv4 Address).
    • Mac/Linux: ifconfig (Look for inet under the en0 or wlan0 section).
  3. Note down the IP address. For this tutorial, we will assume your computer’s IP is 192.168.1.50.

Step 2: Configure & Run the Frontend (Next.js)

To make Next.js accept connections from outside localhost, we need to change its host to 0.0.0.0.

1. Update package.json

Open your FRONTEND/package.json file and modify the "dev" script to look like this: 

"scripts": {
  "dev": "next dev -H 0.0.0.0"
}

Pro Tip: Using -H 0.0.0.0 is much more flexible than hardcoding a specific IP. If your Wi-Fi router assigns your computer a different IP tomorrow, you won’t need to change this file again.

2. Update Frontend .env.local

Open your .env.local (or .env) file in your Frontend folder and point the API URL to your computer’s local IP address: 

NEXT_PUBLIC_BACKEND_URL=http://192.168.1.50:8000

3. Start the Frontend Server

npm run dev

Verify that your terminal log shows - Network: [http://0.0.0.0:3000](http://0.0.0.0:3000).

Step 3: Configure & Run the Backend (Laravel)

Laravel also locks itself to 127.0.0.1 by default. We need to open it up and ensure the CORS configuration recognizes the new network path.

1. Update Backend .env

Open your BACKEND/.env file and update the URL configurations to use your local IP: 

APP_URL=http://192.168.1.50:8000
FRONTEND_URL=http://192.168.1.50:3000

2. Clear Laravel’s Configuration Cache

Whenever you modify the .env file, make sure to clear the configuration cache so Laravel reads the changes: 

php artisan config:clear

3. Run Laravel with the --host Flag

Instead of running just php artisan serve, append the host flag to open the server to your network: 

php artisan serve --host=0.0.0.0

Verify that your terminal log updates to INFO Server running on [[http://0.0.0.0:8000](http://0.0.0.0:8000)].

Step 4: Test on Mobile / Other Devices

  1. Ensure your smartphone or secondary device is connected to the exact same Wi-Fi network as your computer.
  2. Open the browser on your mobile device and type your Frontend URL:
http://192.168.1.50:3000

Happy coding!!!