0

I'm trying to add an auth context to my next.js app. Here's the code I'm using in my layout.tsx file:

"use client";

import './globals.css'
import type { Metadata } from 'next'
import { AuthProvider } from '@/context/AuthContext';

export const metadata: Metadata = {
  title: 'Test app',
}

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

When I run this code in a dev server with turbopack, it works exactly how I'd expect it to on my computer, but completely fails on both mobile devices I'm testing it on. It gives the following errors specifically:

error

warnings

Interestingly, once I remove the "use client" directive from my layout.tsx file, the site works fine (although I then need to remove my AuthContext as well). I can use the directive on any other page just fine.

Can anyone give insight into why this might be happening? Thanks so much!

SprintKeyz
  • 134
  • 8

1 Answers1

0

I just solved this after a bit more exploring. As per this answer it appears that you can't use the directive in a root layout. I chose to make a new component for my contexts and simply "use client" in that.

SprintKeyz
  • 134
  • 8