Key Dashboard Features

// components/stat-card.tsx
export default function StatCard() {
  return <div>1,234 Users</div>
}

// Use chart libraries
import { LineChart } from 'recharts'

// components/data-table.tsx
export default function Table() {
  return <table>...</table>
}

// components/notifications.tsx
export default function Alerts() {
  return <div>3 new alerts</div>
}

🔹 Dashboard Layout with Sidebar

Create a dashboard layout with navigation sidebar and main content area. This layout provides consistent structure across all dashboard pages with easy access to different sections.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <aside className="sidebar">
        <h2>Menu</h2>
        <nav>
          <a href="/dashboard">Overview</a>
          <a href="/dashboard/users">Users</a>
          <a href="/dashboard/analytics">Analytics</a>
          <a href="/dashboard/settings">Settings</a>
        </nav>
      </aside>
      <main className="content">
        {children}
      </main>
    </div>
  )
}

🔹 Statistics Cards Component

Display important metrics in card format with icons and values. These cards provide quick insights into key performance indicators and can be updated in real-time with fresh data.

// app/dashboard/page.tsx
const stats = [
  { label: 'Total Users', value: '1,234', icon: '👥' },
  { label: 'Revenue', value: '$45,678', icon: '💰' },
  { label: 'Orders', value: '567', icon: '📦' },
  { label: 'Growth', value: '+12%', icon: '📈' }
]

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard Overview</h1>
      <div className="stats-grid">
        {stats.map((stat, i) => (
          <div key={i} className="stat-card">
            <span>{stat.icon}</span>
            <h3>{stat.value}</h3>
            <p>{stat.label}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

🔹 Data Table Component

Display tabular data with sorting and filtering capabilities. This table component shows user information in an organized format perfect for managing large datasets in admin interfaces.

// app/dashboard/users/page.tsx
const users = [
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Active' },
  { id: 3, name: 'Bob Johnson', email: '[email protected]', status: 'Inactive' }
]

export default function UsersPage() {
  return (
    <div>
      <h1>Users</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

🔹 Fetching Dashboard Data

Load dashboard metrics from an API using async server components. Next.js fetches data on the server before rendering, ensuring fast initial page loads with up-to-date information.

// app/dashboard/page.tsx
async function getDashboardData() {
  const res = await fetch('https://api.example.com/dashboard')
  return res.json()
}

export default async function DashboardPage() {
  const data = await getDashboardData()
  
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Total Revenue: ${data.revenue}</p>
      <p>Active Users: {data.activeUsers}</p>
      <p>Pending Orders: {data.pendingOrders}</p>
    </div>
  )
}