자바스크립트/Next js
[next js] 오류 / 클라이언트 컴포넌트
KIMJAVAN
2024. 12. 19. 16:32
728x90
이 에러는 Next.js 13+의 App Router에서 발생하는 **"클라이언트 컴포넌트"**와 관련된 문제입니다. useState와 같은 React Hook은 클라이언트 사이드에서만 동작하므로 "use client" 지시어를 사용해야 한다는 의미입니다.
문제 설명
Next.js 13+의 App Router는 기본적으로 서버 컴포넌트를 사용합니다.
하지만 useState, useEffect와 같은 React의 클라이언트 사이드 기능은 서버 컴포넌트에서는 사용할 수 없습니다.
app/page.tsx 파일에서 **useState**를 사용하려면 이 컴포넌트를 클라이언트 컴포넌트로 명시해줘야 합니다.
해결 방법
"use client" 지시어를 app/page.tsx 파일의 최상단에 추가하세요.