NEXTJS_NO_ASYNC_PAGE

This rule examines all Next.js app router page files and their transitive dependencies to ensure none are asynchronous or return new Promise instances. Even if the page component itself is not asynchronous, importing an asynchronous component somewhere in the page's dependency tree can silently cause the page to render dynamically. This can cause a blank page to be displayed to the user while Next.js waits for long promises to resolve.

This rule will not error if it detects a sibling loading.js file beside the page.

By default, this rule is disabled. To enable it, refer to customizing Conformance.

For further reading, you may find these resources helpful:

• Loading UI and Streaming in Next.js: This guide discusses strategies for loading UI components and streaming content in Next.js applications.
• Next.js Loading File Conventions: This document provides an overview of file conventions related to loading in Next.js.
• Next.js Route Segment Config: This document provides an overview of the dynamic export and how it can be used to force the dynamic behaviour of a layout.

This rule will catch the following code.

export default async function Page() {
  const data = await fetch();
  return <div>{data}</div>;
}

async function AuthButton() {
  const isAuthorized = await auth();
  return <div>{isAuthorized ? 'Authorized' : 'Unauthorized'}</div>;
}
 
export default function Page() {
  return <AuthButton />;
}

You can fix this error by wrapping your async component with a <Suspense/> boundary that has a fallback UI to indicate to Next.js that it should use the fallback until the promise resolves.

Alternatively, you can manually force the dynamic behaviour of the page by exporting a dynamic value. This rule will only error if dynamic is not specified or is set to auto. Read more here.

export const dynamic = 'force-static';
 
export default async function Page() {
  const data = await fetch();
  return <div>{data}</div>;
}