Next.js App Router Patterns

Server Components by default

Pages and layouts are async Server Components unless they need interactivity. Fetch data in Server Components, pass as props to Client wrappers.

// ✅ Server page fetches, client wrapper handles state
export default async function JobsLayout({ children }: { children: React.ReactNode }) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/services/sign-in?from=/services/jobs')
  return (
    <JobsWorkspaceProvider initialApplications={apps}>
      <JobsShell>{children}</JobsShell>
    </JobsWorkspaceProvider>
  )
}