Hi. I want to use Next.js as the frontend and am using Nestjs as my backend API. Since, unlike React SPAs, it has both server-side (server components and actions) and client-side to make API calls, I am struggling how to understand implement auth and role based access, including routing control (proxy.ts is needed most likely). How should I go about it in Next.js without causing unwanted flash of incorrect auth state? Should I use sessions or a session+ JWT hydrid approach? I have pasted the primsa model used by the Backend API for authentication so far.

enum Role {
  USER
  ADMIN
}
enum OAuthProvider {
  GOOGLE
}


model User {
  id            String    @id @default(uuid())
  email         String    @unique
  // Null for accounts created via OAuth only, e.g. Google, that never set a password.
  passwordHash  String?
  name          String
  role          Role      @default(USER)
  emailVerifiedAt DateTime?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  oauthAccounts OAuthAccount[]

  @@map("users")
}

model OAuthAccount {
  id                Int    @id @default(autoincrement())
  userId            String
  provider          OAuthProvider
  providerAccountId String
  createdAt         DateTime      @default(now())

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
  @@index([userId])
  @@map("oauth_accounts")
}