src/content/docs/linter/rules/no-next-async-client-component.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.2.0` - Diagnostic Category: [`lint/correctness/noNextAsyncClientComponent`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/no-async-client-component`](https://nextjs.org/docs/messages/no-async-client-component){
"linter": {
"rules": {
"correctness": {
"noNextAsyncClientComponent": "error"
}
}
}
}
Prevent client components from being async functions.
This rule prevents the use of async functions for client components in Next.js applications. Client components marked with "use client" directive should not be async as this can cause hydration mismatches, break component rendering lifecycle, and lead to unexpected behavior with React's concurrent features.
"use client";
export default async function MyComponent() {
return <div>Hello</div>;
}
"use client";
export default function MyComponent() {
return <div>Hello</div>;
}
// No "use client" directive - server component can be async
export default async function ServerComponent() {
const data = await fetch('/api/data');
return <div>{data}</div>;
}