Next.js를 사용하면서 모바일 기기에서 직접 테스트가 필요할 때가 있었습니다. 개발 중 localhost:3000으로 애플리케이션을 실행하면 데스크탑 브라우저에서는 정상적으로 작동하지만, 동일한 네트워크에 연결된 모바일 기기에서는 접근이 불가능하거나 API 요청이 실패하는 문제가 발생했습니다. 이는 모바일 기기가 localhost를 인식하지 못하고, 대신 실제 로컬 네트워크 IP 주소(예: 192.168.xx.xx)로 접근해야 하기 때문이었습니다.
또한, Next.js의 라우트 핸들러(route handler)를 사용하거나 서버사이드에서 fetch 요청을 보낼 경우, 기본적으로 localhost:3000을 대상으로 설정되어 있어 모바일 기기에서의 접근 시 API 요청이 실패하는 문제가 있었습니다. 이로 인해 로그인과 같은 기능에서 api/auth/login 요청이 제대로 작동하지 않아 "Load failed" 등의 오류가 발생하였습니다.
이 문제를 해결하기 위해 다음과 같은 단계를 통해 Next.js 애플리케이션을 로컬 네트워크에서 모바일 기기로 테스트할 수 있도록 설정을 변경했습니다.
package.json 수정먼저, Next.js 개발 서버가 로컬 네트워크 IP 주소를 인식하도록 package.json 파일의 scripts 섹션을 수정했습니다. 이를 통해 개발 서버가 특정 호스트 IP 주소에서 실행되도록 설정할 수 있습니다.
"scripts": {
"proxy": "next dev -H 192.168.xx.xx",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
proxy 스크립트는 개발 서버를 로컬 네트워크 IP 주소(192.168.xx.xx)에서 실행하도록 설정합니다. -H 플래그는 호스트를 지정하는 옵션으로, 자신의 테스트할 IP 주소를 정확히 입력해야 합니다.dev 스크립트는 여전히 localhost:3000에서 개발 서버를 실행합니다.fetch URL 수정클라이언트 사이드에서 /api/어쩌구저쩌구 형태로 fetch 요청을 보내는 경우, 별도의 수정이 필요 없었습니다.
그러나 서버사이드에서 fetch 요청을 보낼 경우, localhost 대신 실제 로컬 네트워크 IP 주소를 사용해야 합니다.
이를 위해 환경 변수를 활용하여 유연하게 설정할 수 있도록 했습니다.
NEXT_PUBLIC_BASE_URL="http://192.168.xx.xx:3000"
.env.local 파일에 NEXT_PUBLIC_BASE_URL 변수를 추가하여, 서버사이드 fetch 요청 시 사용할 기본 URL을 설정합니다.fetch 요청을 보냅니다.위의 설정을 완료한 후, 모바일 기기에서 로컬 네트워크 IP 주소(192.168.xx.xx:3000)로 애플리케이션에 접속하면 모든 기능이 정상적으로 작동하게 되었습니다. 특히, 서버사이드 fetch 요청도 올바르게 처리되어 API 요청이 실패하지 않았습니다.
yarn proxy
yarn proxy 명령어를 실행하여, 수정한 package.json 스크립트를 통해 개발 서버를 로컬 네트워크 IP 주소에서 실행합니다.이러한 설정 변경을 통해 다음과 같은 개선 효과를 얻었습니다:
fetch 요청이 올바른 URL을 참조하게 되어, 로그인 등 중요한 기능에서 API 요청이 실패하지 않고 정상적으로 작동했습니다..env.local 파일을 통해 서버사이드 fetch 요청의 기본 URL을 유연하게 설정함으로써, 개발 환경과 배포 환경 간의 설정을 손쉽게 관리할 수 있음을 배웠습니다.next dev -H 옵션을 활용하여 개발 서버의 호스트를 변경하는 방법을 학습하게 되었습니다. 이는 로컬 네트워크에서 애플리케이션을 테스트할 때 매우 유용한 기능입니다.