Next.js App Router: async arrow vs. async function in nested layout?

Question

I’m exporting an async arrow function as default. It seems to work in nested layouts, but I heard it’s not valid for app/layout.tsx. Is this safe for nested routes like /documentation/layout.tsx or should I use a default async function instead?

const DocumentationLayout = async ({
  children
}: {
  children: React.ReactNode
}) => {
  const pageMap = (await getPageMap()).filter(isMdxFile)

  return (
    <Layout pageMap={pageMap} feedback={{ content: null }} editLink={false}>
      {children}
    </Layout>
  )
}

export default DocumentationLayout

Anay-208 | Ping in replies · Answer

I recommend using default async function only, because Next.js doesn't like anonymous arrow function, it messes with HMR i think

Edit: I guess it used to be a thing with old versions, since it seems to be working fine now

Next.js App Router: async arrow vs. async function in nested layout?

2 Replies