2 min read

NEXTJS_NO_ASYNC_LAYOUT

Ensures that the exported Next.js `layout` component and its transitive dependencies are not asynchronous, as that can block the rendering of the layout and the rest of the page.
Table of Contents

Conformance is available on Enterprise plans

This rule is in preview, please give us your feedback!

This rule is available from version 1.1.0.

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

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

For further reading, these resources may be helpful:

This rule will catch the following code.

app/layout.tsx
export default async function RootLayout() {
  const data = await fetch();
  return <div>{data}</div>;
}
app/layout.jsx
async function AuthButton() {
  const isAuthorized = await auth();
  return <div>{isAuthorized ? 'Authorized' : 'Unauthorized'}</div>;
}
 
export default function Layout() {
  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.

You can also move the asynchronous component to a parallel route which allows Next.js to render one or more pages within the same layout.

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

app/layout.tsx
export const dynamic = 'force-static';
 
export default async function RootLayout() {
  const data = await fetch();
  return <div>{data}</div>;
}
Last updated on June 22, 2024