How to Create a Dashboard in Next.js: Simple Guide

To create a dashboard in Next.js, build functional components for your UI, fetch data using getServerSideProps or client-side hooks, and style with CSS modules or Tailwind CSS. Use pages or the app directory to organize your dashboard routes and components.

Syntax

A basic dashboard in Next.js uses functional components inside the pages or app directory. You can fetch data with getServerSideProps for server-side rendering or use React hooks like useEffect for client-side fetching. Styling is often done with CSS modules or utility-first CSS frameworks.

• pages/dashboard.js: Main dashboard component
• getServerSideProps: Fetch data on each request
• CSS Modules: Scoped styling for components

javascript

export async function getServerSideProps() {
  // Fetch data here
  const data = await fetch('https://api.example.com/stats').then(res => res.json())
  return { props: { data } }
}

export default function Dashboard({ data }) {
  return (
    <main>
      <h1>Dashboard</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

Example

This example shows a simple dashboard page that fetches user stats from an API on the server side and displays them. It uses CSS modules for styling.

javascript

import styles from './dashboard.module.css'

export async function getServerSideProps() {
  const data = await fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json())
  return { props: { data } }
}

export default function Dashboard({ data }) {
  return (
    <main className={styles.container}>
      <h1 className={styles.title}>User Dashboard</h1>
      <div className={styles.card}>
        <p><strong>Name:</strong> {data.name}</p>
        <p><strong>Email:</strong> {data.email}</p>
        <p><strong>City:</strong> {data.address.city}</p>
      </div>
    </main>
  )
}

Output

<h1>User Dashboard</h1>
Name: Leanne Graham
Email: [e-mail]
City: Gwenborough

Common Pitfalls

Common mistakes when creating dashboards in Next.js include:

• Fetching data only on the client side causing flicker or slower load.
• Not using scoped CSS, which can cause style conflicts.
• Using class components instead of functional components with hooks.
• Ignoring accessibility and semantic HTML in dashboard layout.

Always prefer getServerSideProps or getStaticProps for data fetching when SEO or initial load speed matters.

javascript

/* Wrong: Client-side fetch causing flicker */
import { useEffect, useState } from 'react'

export default function Dashboard() {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch('/api/stats').then(res => res.json()).then(setData)
  }, [])
  if (!data) return <p>Loading...</p>
  return <div>{data.value}</div>
}

/* Right: Server-side fetch for fast initial load */
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/stats').then(res => res.json())
  return { props: { data } }
}

export default function Dashboard({ data }) {
  return <div>{data.value}</div>
}

Quick Reference

Tips for building dashboards in Next.js:

• Use getServerSideProps or getStaticProps for data fetching to improve performance and SEO.
• Organize dashboard pages under pages/dashboard or app/dashboard folder.
• Use CSS modules or Tailwind CSS for scoped, maintainable styles.
• Build reusable components for charts, cards, and tables.
• Ensure accessibility with semantic HTML and ARIA roles.

Key Takeaways

Use functional components and server-side data fetching for fast, SEO-friendly dashboards.

Style your dashboard with CSS modules or Tailwind CSS to keep styles scoped and clean.

Avoid client-only data fetching to prevent loading flickers and improve user experience.

Organize dashboard routes clearly in the Next.js pages or app directory.

Always use semantic HTML and accessibility best practices in your dashboard UI.