[Next.js 에러] TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

참고

Rendering: Client Components | Next.js

 

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it

 

에러

사용자 정의 컴포넌트를 만들고 styled-components를 통해 해당 컴포넌트에 테스트용 스타일을 입히고,

본 컴포넌트가 렌더링되는 페이지 경로로 이동했을 때 다음과 같은 에러가 떴다.

대충 직역해보면, "createContext는 클라이언트 컴포넌트에서만 작동합니다. (이를 사용하려면)파일 상단에 'use client' 지시문을 추가하세요." 란 에러메시지였다.

 

원인

next.js 공식문서에 들어가보면 아래와 같이 파일 상단에 'use client' 지시어를 정의하면,next.js에서는 해당 지시어 하위에 있는 컴포넌트를 포함, 파일로 가져온 다른 모듈들을 클라이언트 번들의 일부로 간주하고, 서버에서 이를 미리 렌더링시킨다고 한다.이를 달리 바꿔 말하면, 해당 지시어 없이 컴포넌트를 렌더링시키려고 할 때, 서버에서는 이게 클라이언트 컴포넌트인지 모르고 지나치게 되고 이로 인해 컴파일 과정 상에 에러를 일으킬 수 있다는 것..!(원래 진입점이 되는 파일 상단에서만 한 번 써주면 되는데, 내가 그걸 안해놔서 에러가 나는 것 같다.)

 

해결

에러메시지에서 하라는대로 파일 상단에 "use client"; 문구 하나 추가하니까 에러가 사라졌다.

그 결과로 배경색 lightblue가 잘 적용된 것을 볼 수 있다 :)