Client Component를 async 함수로 선언함
use client가 있는 React·Next.js 컴포넌트를 async 함수로 만들어 Promise를 반환하는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- Client Component 함수 자체를 async로 만들지 말고, 데이터 요청은 서버 컴포넌트·effect·이벤트 핸들러 등 허용된 경계에서 실행해야 합니다.
- 먼저 확인할 항목
- 파일 상단에 `use client`가 있고 컴포넌트 선언이 `async function`인지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- Next.js
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 관련 기술
현재 증상
- 빌드 실패
- 애플리케이션 오류 메시지
먼저 확인할 항목
파일 상단에 `use client`가 있고 컴포넌트 선언이 `async function`인지 확인합니다.
빌드 또는 브라우저 콘솔에 Client Component가 async일 수 없다는 문구가 표시되는지 확인합니다.
데이터 요청이 렌더링 함수 안에서 직접 실행되는지 확인합니다.
서버 컴포넌트와 Client Component의 경계를 나누어 같은 동작을 재현합니다.
피해야 할 조치
주의
- 오류를 없애기 위해 `use client`를 무조건 삭제하지 않습니다.
- 렌더링 중 데이터 변경 요청을 실행하지 않습니다.
환경별 원인과 조치
확인 순서
- 파일의
use client선언과 컴포넌트 함수의async여부를 함께 확인합니다. - 렌더링 함수에서
fetch, 데이터베이스 호출, 상태 변경을 직접 실행하는지 찾습니다. - 서버에서 처리할 데이터는 서버 컴포넌트로 넘기고, 브라우저에서 처리할 데이터는 effect·이벤트 경계로 옮긴 테스트를 비교합니다.
- 조건이 일치하면 이 문서의 공식 출처와 적용 환경을 확인합니다.
use client를 지워 빌드만 통과시키지 마십시오. 브라우저 이벤트와 상태가 필요한 부분을 서버 경계와 분리해야 합니다.
참고 자료
No async Client Component | Next.js (새 창에서 열림)
Next.js · 공식 자료 · 확인 범위: Client Component를 async 함수로 선언할 수 없다는 오류와 대체 데이터 처리 방법을 설명합니다. · 확인일: 2026-08-04