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
Related rules
More Next.js rules from the rules reference:
react-doctor/nextjs-error-boundary-missing-use-client: Add `'use client'` as the first statement of error.tsx / global-error.tsx so the error boundary becomes a Client Component.react-doctor/nextjs-global-error-missing-html-body: Wrap the global-error UI in `<html><body>...</body></html>` because the root layout unmounts when global-error rendersreact-doctor/nextjs-image-missing-sizes: Add sizes for responsive behavior: `sizes="(max-width: 768px) 100vw, 50vw"` matching your layout breakpointsreact-doctor/nextjs-inline-script-missing-id: Add `id="descriptive-name"` so Next.js can track, deduplicate, and re-execute the script correctlyreact-doctor/nextjs-missing-metadata: Add `export const metadata = { title: '...', description: '...' }` or `export async function generateMetadata()`