← Hyebin.
Blog
실무에서 반복해서 만난 문제들
Next.js·Cloudflare Workers로 실서비스를 운영하면서 반복적으로 마주친 문제와, 원인을 찾아 해결한 과정을 기록합니다.
·6분
Next.js Hydration Mismatch, 실무에서 반복해서 만난 3가지 케이스
서버와 클라이언트의 렌더링 결과가 어긋나는 Hydration Mismatch를 여러 프로젝트에서 반복적으로 마주쳤다. 실제로 원인이 됐던 3가지 패턴과 각각의 해결 방법을 정리했다.
Next.jsReactHydrationCloudflare Workers
·5분
Cloudflare Workers에서 next/image가 404 날 때
로컬과 Vercel에서는 멀쩡하던 이미지가 Cloudflare Workers 배포 후 갑자기 깨졌다. R2 기반 커스텀 업로드 구조와 next/image 최적화 파이프라인이 충돌한 게 원인이었다.
Next.jsCloudflare WorkersR2이미지 최적화
·5분
Cloudflare Workers 환경변수, process.env로 안 읽힐 때
Vercel이나 로컬 Node 환경에서 잘 동작하던 환경변수 코드가 Cloudflare Workers에 배포하면 조용히 실패하는 경우가 있다. 런타임 바인딩과 빌드타임 주입을 구분하지 못해서 겪은 두 가지 사례.
Cloudflare WorkersOpenNext환경변수
·7분
내 포트폴리오 사이트 Lighthouse 감사 — bfcache, 대비, 보안 헤더 고친 기록
직접 측정한 Lighthouse 리포트를 기준으로 원인을 하나씩 추적해 고친 기록. force-dynamic이 back/forward cache를 막고 있던 것을 발견하고, 색상 대비·main 랜드마크·보안 헤더까지 정리했다.
LighthouseNext.jsWeb PerformanceAccessibility