Next.Js- Error when implementing SessionProvider


Section: Next.js/Authentication with Next Auth/Accessing Sessions on the Client

I am implementing Auth from the Next.Js tutorial. When adding an AuthProvider wrapper around SessionProvider to use in app/layout.tsx I am getting this error:

Error: React Context is unavailable in Server Components

Here are some files for context:

Additional Information:
I have had no issues thus far.


I was able to fix this:

"use client";

import { SessionProvider } from "next-auth/react";
export default SessionProvider;

and imported that SessionProvider in the layout.tsx:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import NavBar from "./NavBar";
import SessionProvider from "./auth/Provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",

export default function RootLayout({
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-theme="winter">
      <body className={inter.className}>
          <NavBar />
          <main className="p-5">{children}</main>

Also learned there is a difference when referring to imports with {} and not.