Next.js 15中使用Convex时出现headers同步调用控制台错误

在Next.js 15中，将根布局组件包裹在<ConvexAuthNextjsServerProvider>内时，控制台会抛出以下错误：
[Server] Error: Route "/" used headers().get('Host'). headers() should be awaited before using its value.

该问题在Next.js 14中未出现，虽不影响项目功能，但每次刷新或打开页面都会触发报错，目前Convex官方文档尚未更新适配方案。

对应的layout.tsx代码如下：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ConvexAuthNextjsServerProvider>
      <html lang="en">
        <body>
          <JotaiProvider>
            {children}
          </JotaiProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>
  );
}

方案1：将根布局改为异步组件，手动传入Host参数 #

如果ConvexAuthNextjsServerProvider支持手动传入host属性，可以将根布局改为异步组件，提前获取并传入Host值：

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const host = await headers().get('Host');
  return (
    <ConvexAuthNextjsServerProvider host={host}>
      <html lang="en">
        <body>
          <JotaiProvider>
            {children}
          </JotaiProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>
  );
}

方案2：动态导入Provider并禁用SSR #

若Provider不支持手动传入Host，可通过Next.js的dynamic导入将其转为客户端组件，避免在服务端调用同步动态API：

import dynamic from 'next/dynamic';

// 动态导入并禁用服务端渲染
const ConvexAuthNextjsServerProvider = dynamic(
  () => import('@convex-dev/auth/nextjs/server').then(mod => mod.ConvexAuthNextjsServerProvider),
  { ssr: false }
);

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ConvexAuthNextjsServerProvider>
      <html lang="en">
        <body>
          <JotaiProvider>
            {children}
          </JotaiProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>
  );
}

注意：此方案会关闭该Provider的服务端渲染，需根据项目实际情况评估影响。

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