오랜만에 넥스트를 돌렸는데 이상한 에러가 발생해서 해결하는데 이틀이나 소요됐다.
Error: <Html> should not be imported outside of pages/_document.
TypeError: Cannot read properties of null (reading 'useState')
Error occurred prerendering page "/_not-found".
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
이외에 여러 에러도 만나봤지만, 해결했던 결론만 먼저 이야기하고 시작하겠다.
나의 경우 아래를 확인하니 해결됐다.
echo $NODE_ENV
# development
진행중인 백엔드 프로젝트에서 환경변수 고정이 필요했기에 development로 NODE_ENV를 고정해놓았다.
빌드는 프로덕션에 배포용으로 만드는 작업인데 현재 환경변수가 개발환경이니 에러가 발생한 것이었다.
프론트 개발자가 아니라 자세히는 모르지만 무언가 엉킨 것 같다.
그래서 빌드 명령어를 수정하거나 저 환경변수를 지워버리면 된다.
나의 경우는 환경변수가 필요하기에 넥스트 프로젝트의 빌드시 환경변수만 직접 고정해놓았다.
// package.json
// "build": "next build",
"build": "NODE_ENV=production next build",unset NODE_ENV먼저 에러메세지가 훅에 관한 것들이기에 모든 패턴을 맞춰보았지만 동일한 에러로 해결이 되지 않았다.
이걸 해결하면서 참 별의 별 것들을 해보았고 배운 것도 있었다.
1. 넥스트15와 리액트19를 사용중이었는데 버전호환이 되지 않아 다운그레이드
2. "use client"를 선언하지 않으면 기본적으로 서버컴포넌트
3. 훅을 사용하는 곳에 "use client"를 작성
4. 클라이언트 컴포넌트에는 async로 생성 불가
5. 공통 레이아웃이 아닌 라우터별 레이아웃 적용
물론 당연한 사실도 있고 의미없는 것들도 있지만 모두 적용해보아도 해결이 되지 않았고 최후에는 브랜치를 새로 파서 쌩프로젝트를 빌드해보자고 마음먹었다.
넥스트 크리에이트 앱을 한 후 빌드를 하니 터지길래 어이가 없어 찾아본 결과 환경변수 문제인걸 확인했다.
백엔드 개발자로 프론트 사이드 프로젝트가 터지니 멘탈도 같이 터졌는데 개발세상은 참 어렵고 배울게 천지인 것 같다.
'Client > Next.js' 카테고리의 다른 글
| NestJS) Docker - MySQL 연결 환경설정 (0) | 2025.02.11 |
|---|---|
| Next.js app router 규칙 - API 라우트 (13 버전 이상) (0) | 2025.01.10 |
| Next.js) 커스텀 서버를 사용하여 WebSocket 통신하기 (1) | 2024.12.13 |
| 전역변수 상태관리 context API (0) | 2024.12.04 |
| css module (0) | 2024.11.27 |