Getting a console error when using Convex in NextJs

Question

Getting this error when I wrap inside . [ Server ] Error: Route "/" used headers().get('Host'). headers() should be awaited before using its value. Learn more: Nextjs

layout.tsx

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

Basically its saying that headers is a dynamic api and it should be called asynchronously. It was working in Nextjs14 but not now in 15 it is. Although I can still work on the project but this error comes up in console every time I refresh or open it. The official documentation of convex is also not updated yet

Tuhin Kairi · Accepted Answer · 2024-10-29 19:58:46Z

0

if you are using clerk then add dynamic in the clerkprovider>convexproviderwithclerk basically showing while using useAuth

answered Oct 29, 2024 at 19:58

Tuhin Kairi

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Akhil Chandran · Accepted Answer · 2025-01-20 23:32:08Z

The error indicates that the headers() function from Next.js is being used synchronously, but in Next.js 15, it has been updated to require asynchronous usage since it is now a dynamic API. The headers() function should be awaited before accessing its values.

Updated layout.tsx

import { headers } from 'next/headers';

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Ensure headers() is awaited before using its value
  const hostHeader = headers().get('host');

  return (
    <ConvexAuthNextjsServerProvider>
      <html lang="en">
        <body>
          <JotaiProvider>
            {children}
          </JotaiProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>
  );
}

Collectives™ on Stack Overflow

Getting a console error when using Convex in NextJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related