Building a User Dashboard in Next.js 14: Auth, Billing, and Profile Pages

The Dashboard Every SaaS Needs Your landing page converts. Your Stripe checkout works. But users sign up and then what? They see a blank screen. A production user dashboard needs: protected routes, profile management, usage stats, billing management, and a clean nav. Here's how to build it in Next.js 14. Route Structure app/ dashboard/ layout.tsx # Auth check + sidebar page.tsx # Overview/home profile/page.tsx # User settings billing/page.tsx # Stripe portal settings/page.tsx # App preferences Auth Guard in Layout The dashboard layout runs the auth check once for all child routes: // app/dashboard/layout.tsx import { getServerSession } from ' next-auth ' import { authOptions } from ' @/lib/auth ' import { redirect } from ' next/navigation ' import DashboardNav from ' @/components/DashboardNav ' export default async function DashboardLayout ({ children }: { children : React . ReactNode }) { const session = await getServerSession ( authOptions ) if ( ! session ) { redirect ( ' /login ' )