Next.js async behavior

Understand and correctly implement the asynchronous behavior of Next.js APIs and components. Follow these guidelines:

1. Add <Suspense> boundaries around components that use hooks that can trigger suspense, such as useSearchParams in the Next.js App Router:

<Suspense>
  <ComponentUsingSearchParams />
</Suspense>

1. Don’t await synchronous Next.js functions. For example, cookies() from ‘next/headers’ returns a synchronous object:

// Incorrect
const cookieStore = await cookies();

// Correct
const cookieStore = cookies();

1. Next.js page props like searchParams are regular objects, not Promises - handle them correctly:

// Incorrect
export default async function Page(props: {
  searchParams: Promise<{ param?: string }>;
}) {
  const searchParams = await props.searchParams;
  // ...
}

// Correct
export default async function Page({ 
  searchParams 
}: {
  searchParams: { param?: string };
}) {
  // ...
}

Correctly identifying when to use asynchronous patterns like Suspense and await improves application stability and performance.