← All errors · Next.jsNext.js App Router & config errors

async/await is not yet supported in Client Components

Exact error

Error: async/await is not yet supported in Client Components, only Server Components.

What it means

A component marked "use client" was declared as an async function. Only Server Components can be async.

Likely causes

• Adding "use client" to a page that does `export default async function`.
• Fetching data with await directly inside a client component body.

How to fix it

1. Option A: remove "use client" and keep the async data fetching in a Server Component, passing data down to a small client child.

2. Option B: keep it a client component and fetch in an effect:

   'use client';
   import { useEffect, useState } from 'react';
   export default function Posts() {
     const [posts, setPosts] = useState([]);
     useEffect(() => { fetch('/api/posts').then(r => r.json()).then(setPosts); }, []);
     return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
   }

Prevent this next time

• Run `next build` (not just `next dev`) before every deploy; several of these errors only appear in production builds.
• Keep a checked-in `.env.example` listing every required variable.

Related errors

• You're importing a component that needs useState. It only works in a Client Component