저장 즉시 화면 반영
파일을 수정하면 개발 서버가 변경 모듈을 감지해 브라우저에 빠르게 반영합니다.
dev server control
개발 서버 점검 기준
npm run dev는 빠른 피드백을 주지만, 포트 충돌이나 환경
변수 노출 같은 기본 조건을 같이 확인해야 안정적으로 실습할 수
있습니다.
오류를 화면에서 확인
문법 오류나 런타임 오류가 생기면 브라우저 오버레이가 원인을 표시합니다.
3000이 막히면 변경
PORT=3001처럼 다른 포트를 지정해 충돌을 피할 수
있습니다.
설정은 루트에서 관리
next.config.js는 이미지, 엄격 모드, 환경별 옵션의
기준점입니다.
1
start
프로젝트 폴더에서 개발 서버를 실행합니다.
2
open
터미널이 안내한 localhost 주소로 접속합니다.
3
edit
page나 layout 파일을 수정하고 저장합니다.
4
inspect
화면, 터미널 로그, 오버레이를 같이 봅니다.
5
stop
작업이 끝나면 터미널에서 서버를 종료합니다.
원격 이미지를 쓰면 허용 도메인이나 패턴을 설정해 로딩 오류를 줄입니다.
React 엄격 모드는 개발 중 이중 실행으로 부작용과 오래된 패턴을 드러내므로 초반부터 켜 둡니다.
브라우저에 노출해도 되는 값만 NEXT_PUBLIC_ 접두사를
붙입니다.