How to Use Async Components in Next.js: Simple Guide

In Next.js, you can create an async component by defining a React functional component as an async function. This allows you to use await inside the component to fetch data or perform asynchronous tasks before rendering. Remember to use this pattern only in Server Components or with dynamic imports for client components.

Syntax

An async component in Next.js is a React functional component declared with the async keyword. This lets you use await inside the component to wait for promises, such as data fetching.

Example parts:

• async function ComponentName(): Declares the component as async.
• await: Pauses execution until the promise resolves.
• return: Returns JSX to render.

jsx

export default async function MyComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json())
  return <div>{data.message}</div>
}

Output

<div>Message from API</div>

Example

This example shows an async component fetching data from a public API and rendering it. It runs on the server side in Next.js 13+ App Router by default.

jsx

export default async function Greeting() {
  const response = await fetch('https://api.agify.io?name=michael')
  const data = await response.json()
  return (
    <main>
      <h1>Hello, Michael!</h1>
      <p>Estimated age: {data.age}</p>
    </main>
  )
}

Output

<main>
  <h1>Hello, Michael!</h1>
  <p>Estimated age: 70</p>
</main>

Common Pitfalls

Common mistakes when using async components in Next.js include:

• Trying to use async components in Client Components without dynamic import and suspense, which causes errors.
• Not handling errors from await calls, leading to crashes.
• Using async components in pages directory without App Router, which is not supported.

Always use async components in the app/ directory or with dynamic imports for client-side usage.

jsx

/* Wrong: Async component used directly in client component */

'use client'

export default async function ClientAsync() {
  const data = await fetch('/api/data').then(res => res.json())
  return <div>{data.value}</div>
}

/* Right: Use dynamic import with suspense for client async */

import dynamic from 'next/dynamic'
import { Suspense } from 'react'

const AsyncComponent = dynamic(() => import('./AsyncComponent'), { suspense: true })

export default function Wrapper() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  )
}

Quick Reference

Tips for using async components in Next.js:

• Use async components only in the app/ directory (Server Components).
• For client-side async components, use dynamic() with Suspense.
• Always handle errors in async calls to avoid crashes.
• Async components help with data fetching and code splitting.

Key Takeaways

Declare React components as async functions to use await inside them in Next.js App Router.

Async components run on the server by default in Next.js 13+ app directory.

Use dynamic imports with suspense for async client components to avoid errors.

Always handle errors in async data fetching to keep your app stable.

Async components improve loading by fetching data before rendering.