[Fixed] Error: async/await is not yet supported in Client Components in next.js – Next.js

The Problem:

In a Next.js project, when using use client in a client component within a page under the [id] directory, an error message appears: "Error: async/await is not yet supported in Client Components, only Server Components." This error occurs despite the page being rendered on the server-side. Removing useState and useEffect hooks resolves the issue, but essential click and loading actions that rely on these hooks cannot be implemented.

The Solutions:

Solution 1: Split the code into Client & Server component

1. Create a `page.tsx` file in the `app` directory. This will be the server component where you will fetch data and pass it to the client component as parameters.
2. Create a `ClientComponent.tsx` file in the `components` directory. This will be the client component where you can have state and events if needed.
3. In the `page.tsx` file, fetch the data you need and pass it to the `ClientComponent` as a prop.
4. In the `ClientComponent.tsx` file, use `useState` and `useEffect` to manage state and events.

Solution 2: Removing the `async` Keyword

To resolve the error, remove the async keyword from the export statement of the page component. Instead of:

export default async function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  // your code here
}

Use:

export default function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  // your code here
}

This change prevents the page component from being treated as an asynchronous function, which is not supported in client components in Next.js. By removing the async keyword, the function becomes a regular synchronous function, allowing the page component to render correctly.

Solution 3: Utilize `dynamic` function from `next/dynamic` package

To resolve the error “Error: async/await is not yet supported in Client Components, only Server Components”, you can leverage the `dynamic` function from the `next/dynamic` package. This allows you to dynamically import components, enabling server-side rendering (SSR) and resolving the issue. Here’s an example:

const ChatWelcomeContent = dynamic(() => import("./chat-welcome-content"), {
  ssr: true,
});

This approach effectively addresses the error and eliminates the need for prop drilling. It provides a cleaner and more efficient solution to fetching data in the `page.tsx` file.

Video Explanation:

The following video, titled "TypeScript DOES NOT like Async React Server Components in ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Hey, developers! Ahmad Awais here with a quick fix for a common issue in Next.js Server Components with TypeScript.