Next.js에서 Recoil 사용 에러

세 줄 요약!

1. 클라이언트 컴포넌트인데 인식을 못 하는 것 같은 오류가 뜸

2. Recoil 과 Next.js 의 충돌

3. Recoil 대신 Zustand 사용

 

상황

평소에 사용했던 것처럼 recoil 라이브러리를 Install 하고 useRecoilState 사용했는데,

서버 컴포넌트에서 hook을 사용했을 때 뜨는 오류가 출력됨

환경: Next.js 15 + React 19

 

시도

use client 지시자를 빼먹었는가?

-> 첫 줄에 잘 넣어 둠

 

Root Layout에 Provider를 추가하지 않았는가?

-> 추가함

 

결론

Recoil 사용을 중단하고 Zustand를 사용함

 

이유

일단 Next.js로 프로젝트를 진행하는 것 자체가 처음이었으므로 아무 생각 없이 install 하고 적용했는데, Next.js의 가장 큰 특징인 서버 컴포넌트에서는 당연히 Recoil context 사용 불가능함. 그래서 SSR, CSR 모두 대응 가능한 Zustand로 변경함.

검색해 봐도 Next.js에서 Recoil이 아예 사용 불가능한 것은 아니라는데, wrapper 로 한 번 더 감싸 주거나 use client 지시자를 사용해서 클라이언트 컴포넌트로 지정하고 로직을 아무리 되짚어도 해결되지 않아서 Zustand 로 사용! (컴포넌트 구성이나 렌더링 순서 문제로 인해 오류가 발생할 수 있다고 한다 ㅠㅠ)

 

사실 오류를 해결한 게 아니라 recoil을 포기한 게 맞긴 하지만, Next.js 환경에서는 recoil 보다 zustand가 더 안정적이라는 걸 깨달아서 기록해 둔다.

작업할 때 전에 했었으니까~ 라는 이유로 스택 / 기술을 적용하지 말고 다른 스택이나 구현 기술을 고려하는 버릇이 필요!