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') } return ( <div cla