AuthProvider context for Next JS Pages Router returning TypeError: getStaticPaths is not a function

Question

I am trying to wrap my Next JS App (Pages Router) in an AuthProvider Context. My app has custom layouts per page and I am getting the return of;

Server Error TypeError: getStaticPaths is not a function

How do I resolve this?

_app.js code

export default function App({ Component, pageProps }) {
  const router = useRouter();
  const getLayout = Component.getLayout || ((page) => page);

  return (
    <AuthProvider>
      <NextIntlClientProvider
        locale={router.locale}
        timeZone="Asia/Tbilisi"
        messages={pageProps.messages}>
        {getLayout(<Component {...pageProps} />)}
      </NextIntlClientProvider>
    </AuthProvider>
  );
}

admin.js code

import AdminNavbar from "@/components/private/AdminNavbar";
import AdminSidebar from "@/components/private/AdminSidebar";

export default function Admin() {
  return <div>Admin</div>;
}

Admin.getLayout = function PageLayout(page) {
  return (
    <main className="flex flex-1">
      <AdminSidebar />
      <AdminNavbar>{page}</AdminNavbar>
    </main>
  );
};

AdminNavbar.jsx code

import { useAuth } from "@/providers/Auth"; // THOROWING ERROR

export default function AdminNavbar({ children }) {
  const { user } = useAuth();
  return (
    <main className="w-full">
      <div className="flex w-full px-4 py-3 border-b place-content-end">
        <div className="flex items-center justify-center h-10 w-10 rounded-full">
          {user?.displayName}
        </div>
      </div>
      {children}
    </main>
  );
}