App Page (pages/_app.tsx)¶

Overview¶

Root application component that wraps all pages with common providers and layouts.

Features¶

Global session management
Loading state handling
Layout wrapping for authenticated routes
Route-based provider exclusion

URL Parameters¶

None - root application component

Implementation¶

State Management¶

const [isLoading, setIsLoading] = useState(false);

Methods¶

None - component primarily handles rendering logic

HTML Structure¶

<SessionProvider basePath='/app/api/auth' session={pageProps.session}>
  {isLoading ? (
    <LoadingPage />
  ) : (
    <Layout>
      <Component {...pageProps} setIsLoading={setIsLoading} />
    </Layout>
  )}
</SessionProvider>

Props¶

interface AppProps {
  Component: NextPage;
  pageProps: any;
}

Components/API Routes Used¶

Components¶

API Routes¶

/app/api/auth/* (NextAuth base path)

Routes to Page¶

Not directly routable - wraps all pages

Dependencies¶

import { SessionProvider } from 'next-auth/react'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import 'bootstrap/dist/css/bootstrap.min.css'

Notes¶

Excludes SessionProvider for specific routes (e.g., /reset-password)
Handles global styles and CSS imports
Provides loading state management to all pages
Central point for authentication state management