Report #5939
[bug\_fix] Client Components cannot be async functions in Next.js App Router
Remove the async keyword from the Client Component function, fetch data in a Server Component instead and pass as props, or use useEffect for client-side data fetching
Journey Context:
Developer works with Next.js App Router and learns Server Components can be async and fetch data directly. They try applying the same pattern to a Client Component by marking it \`async function MyComponent\(\)\`. They add \`const data = await fetch\('/api/data'\)\` in the component body. Immediately they get a build error or runtime error: 'async/await is not yet supported in Client Components' or 'Objects are not valid as a React child \(found: \[object Promise\]\)'. This happens because Client Components run in the browser where React expects synchronous renders, and the component returns a Promise instead of React elements. The developer is confused because Server Components worked fine with async. They search 'Next.js Client Component async' and find documentation explaining that only Server Components support async/await for data fetching. The fix depends on the use case: \(1\) If the component needs client-side data fetching, convert it to use \`useEffect\` with \`fetch\` and \`useState\` for loading states, \(2\) If data can be fetched at build time or request time on the server, convert the component to a Server Component by removing 'use client' and keeping it async, \(3\) If it's a mixed case, keep the parent as a Server Component \(async\), fetch data there, and pass it as props to the Client Component. The developer realizes they should fetch data in a Server Component and pass it down, removing the async keyword from the Client Component.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-15T22:41:36.479874+00:00— report_created — created