Next.js: a Client Component cannot be async

What it means in plain English

Next.js raises this when a Client Component is defined as an async function. React Client Components do not support async functions. A file that starts with 'use client' and then declares async function is the case the error page shows.

A hook such as useState in a Server Component is a different message. See Next.js: a client hook was used in a Server Component.

Likely causes

• The file is marked 'use client' and the component function is async.
• The component was made async so it could await a fetch, while it also had to stay a Client Component.
• The component could have been a Server Component, which is allowed to be async.

How to fix it, step by step

1. If the component can live on the server, make it a Server Component and keep async. Next.js recommends fetching on the server. Its example is an async page that fetches JSON and renders each item's title. The path in the sample below stands in for that fetch:

export default async function Page() {
  const data = await fetch('/api/posts')
  const posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

2. If the file has to stay a Client Component, remove the async keyword and fetch another way.
3. For client fetching, Next.js says you can call fetch inside useEffect (it marks that not recommended), or use a library such as SWR or React Query.
4. Or pass promises into child components with a context provider, and resolve them with the use API. Next.js shows that as a separate pattern: a Server Component starts the fetch, and a Client Component reads the promise with use.

How to check it worked

• The build no longer reports that a Client Component is async.
• The data still renders, from the server fetch or from the client path you kept.

Sources

• https://nextjs.org/docs/messages/no-async-client-component (opens in a new tab)