Next.js中使用SessionProvider后出现默认导出非React组件错误求助

错误原因 #

1. Next.js App Router的根布局要求<html>必须是根组件的直接子元素，不能被其他组件（比如SessionProvider）包裹。
2. 你的rootLayout组件没有默认导出，这是App Router布局组件的强制要求。

修正方案 #

• 将SessionProvider移到<body>标签内部，包裹需要访问会话的内容（比如<main>和Nav）
• 给rootLayout添加默认导出语句

修改后的layout.js代码 #

import Nav from '@components/Nav'
import '@styles/globals.css'
import { SessionProvider } from "next-auth/react"

export const metadata = {
    title: "prompt",
    description: "this is a page"
}

const rootLayout = ({ children }) => {
  return (
    <html>
      <body>
        <div className='main'>
          <div className='gradient' />
        </div>
        <SessionProvider>
          <main className='app'>
            <Nav />
            {children}
          </main>
        </SessionProvider>
      </body>
    </html>
  )
}

export default rootLayout

内容的提问来源于stack exchange，提问作者krish