자바스크립트/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 파일의 최상단에 추가하세요.