안드로이드, 아이폰 또는 노트북 등 브라우저가 설치된 모든 기기에서 가능하다.
단 개발 컴퓨터와 미리보는 기기가 서로 같은 WiFi 네트워크를 사용하고 있어야 한다.
1. 개발 컴퓨터 IP 주소 확인
macOS
아래 명령어를 터미널에 입력한다.
ifconfig | grep "inet "
그러면 아래와 같이 나올텐데
inet 127.X.X.X netmask 0xff000000 inet 192.XXX.X.XX netmask 0xffffff00 broadcast 192.XXX.X.XXX
이때 두 번째 줄의 첫 ip 주소를 메모해둔다. 192.XXX.X.XX 형식이다.
Windows
마찬가지로 cmd를 열고 아래 명령어를 확인한다. 192.168.X.X나 172.X.X.X 형태의 주소를 찾는다.
ipconfig
2. Next.js package.json 수정
프로젝트에서 package.json 파일을 찾고 scripts.dev의
next dev 뒤에 -H 0.0.0.0 을 추가한다.// package.json "scripts": { "dev": "next dev -H 0.0.0.0", // <- 기존 "next dev" 뒤에 -H 0.0.0.0 추가 "build": "next build", "start": "next start", "lint": "next lint" }
이를 통해 localhost뿐만 아니라 컴퓨터의 모든 ip 주소로부터 접근 가능하게 한다.
3. 디버깅 기기에서 연결
평소처럼 개발 서버를 연다.
npm run dev
그러면 아래처럼 나온다. 아래에서 :3000의 포트 번호를 확인한다.
> next dev -H 0.0.0.0 ▲ Next.js 15.3.3 - Local: http://localhost:3000 - Network: http://0.0.0.0:3000 - Environments: .env ✓ Starting... ✓ Ready in 1114ms
1. 개발 컴퓨터 IP 주소 확인 에서 확인한 ip주소를 모바일 기기 브라우저에 입력한다.
예를 들어 아래 주소를 그대로 크롬이나 웨일 브라우저에 입력하면 된다.
http://192.168.9.14:3000/