# `react-doctor/nextjs-async-client-component`

Fetch data in a parent Server Component and pass it as props, or use useQuery/useSWR in the client component

- **Category:** Next.js
- **Severity:** error
- **Source:** oxlint-plugin-react-doctor
- **Framework:** nextjs
- **Enabled when:** framework=nextjs and capabilities=nextjs

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Triggers when the file has a top-level 'use client' directive AND contains an async function or arrow function with a PascalCase (uppercase) name. Confirm the async keyword is on the exported component itself (not on an inner helper or a non-component utility) and that the file is actually a client module rather than a misclassified server file.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Remove the async keyword from the client component. Move data fetching to a parent Server Component and pass the resolved data via props, or fetch inside the client component with TanStack Query, SWR, or React's use() hook. Pages Router uses getServerSideProps/getStaticProps instead. https://nextjs.org/docs/app/getting-started/fetching-data