1. Get IP Addresses

Before configuring your project, you need to know your Windows PC's IP address and the IP address of the WSL 2 instance.

Windows PC IP Address:

1. Open Command Prompt or PowerShell.
2. Run the following command:

ipconfig

Look for the “IPv4 Address“ under your active network adapter (e.g., Ethernet or Wi-Fi).

WSL 2 IP Address:

1. Open your WSL 2 terminal.
2. Run the following command:

ip addr show eth0 | grep 'inet\b' | awk '{print $2}' | cut -d/ -f1

This will display the IP address of the eth0 device in your WSL 2 instance.

2. Modify Next.js Configuration

Ensure that your Next.js project is configured to listen on all network interfaces.

Open your package.json file and add the following to the scripts section:

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

3. Set Up Port Forwarding in WSL 2

Since WSL 2 uses a virtual network, you need to set up port forwarding from your Windows host to your WSL 2 instance.

Open PowerShell as Administrator and run the following command (replace the IP addresses with your actual addresses):

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=192.168.1.100 connectport=3000 connectaddress=172.18.92.24

Verify the port forwarding rule is added:

netsh interface portproxy show all

4. Ensure WSL 2 is Listening on the Correct Port

Inside your WSL 2 instance, make sure that Next.js is running and listening on port 3000:

npm run dev

5. Configure Windows Firewall

Allow incoming traffic on port 3000 through the Windows firewall:

1. Open Windows Defender Firewall with Advanced Security.
2. Click on “Inbound Rules“ and then “New Rule...“
3. Select “Port“ and click “Next.“
4. Choose “TCP“ and specify port 3000.
5. Allow the connection and specify when the rule applies (Domain, Private, Public).
6. Name the rule something like “Allow Next.js on port 3000“ and finish.