Next.js 배포 후 환경변수가 안 먹을 때

Next.js 환경변수 문제는 렌더링 타이밍과 scope 때문에 생긴다. 너무 크게 잡으면 모든 파일이 의심스러워진다. 차라리 작은 부분부터 확인하는 게 빠르다.

사용자가 보는 화면부터 시작

공개 URL에서 실제로 어떻게 보이는지부터 확인해야 한다. 그 다음 HTML head를 들여다보면, 문제가 환경변수인지 다른 부분인지 빨리 알 수 있다.

Next.js 관점에서 확인할 값

메타데이터와 canonical 확인이 중요하다. 정상 상태를 먼저 정해두면 비정상 상태와 비교하기가 훨씬 쉽다.

• 먼저 볼 값: HTML head와 메타데이터
• 비교할 값: 정상일 때의 렌더링 상태
• 남겨둘 기록: 빌드 로그, 응답 코드, 설정 변경사항

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

배포 전 점검하기

canonical부터 확인하면 불필요한 수정을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다.

1. 증상이 같은 조건에서 다시 나는지 확인한다.
2. 빌드 로그에서 바뀐 부분을 설명해본다.
3. 실제 공개 URL을 열어 최종 확인한다.

이 절차를 따르면 Next.js 환경변수 문제는 빨리 정리된다.