nextjs-dashboard

nextjs-dashboard

Expert knowledge for building production-ready dashboards with Next.js App Router (v15+), React 19, Tailwind CSS v4, and token-driven design systems.

1) App Router Mental Model

• Server Components (default): fetch data, access server resources, no hooks, no browser APIs
• Client Components ('use client'): hooks, events, browser APIs, polling, real-time state
• Rule: push 'use client' as far down the tree as possible — layouts and page shells should stay server-side
• Data fetching: server components fetch directly; client components use useEffect + fetch or SWR/React Query

// page.tsx — Server Component (no 'use client')
import { DomainList } from './DomainList' // client island

export default async function DomainsPage() {
  const domains = await getDomains() // server-side fetch
  return <DomainList initialDomains={domains} />
}

// DomainList.tsx — Client Component
'use client'
export function DomainList({ initialDomains }: { initialDomains: Domain[] }) {
  const [domains, setDomains] = useState(initialDomains)
  // ... polling, mutations
}

2) Mobile Navigation Pattern (Sidebar + Drawer)

The most common gap in dashboard UIs. Sidebar must work as a drawer on mobile.

'use client'
import { useState, useEffect } from 'react'
import { usePathname } from 'next/navigation'
import { Menu, X } from 'lucide-react'

export function Sidebar() {
  const [open, setOpen] = useState(false)
  const pathname = usePathname()

  // Close drawer on navigation
  useEffect(() => { setOpen(false) }, [pathname])

  // Prevent body scroll when drawer open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [open])

  return (
    <>
      {/* Mobile top bar */}
      <header className="sticky top-0 z-40 flex items-center justify-between px-4 h-14 lg:hidden"
        style={{ background: '#0c1a2e', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <Logo />
        <button onClick={() => setOpen(true)} aria-label="Open menu"
          className="flex h-9 w-9 items-center justify-center rounded-lg text-white/70 hover:bg-white/10">
          <Menu size={20} />
        </button>
      </header>

      {/* Backdrop */}
      {open && (
        <div className="fixed inset-0 z-40 bg-black/60 lg:hidden backdrop-blur-sm"
          onClick={() => setOpen(false)} />
      )}

      {/* Sidebar — drawer on mobile, sticky on desktop */}
      <aside className={`
        fixed inset-y-0 left-0 z-50 w-[280px] transition-transform duration-300 ease-out
        lg:sticky lg:top-0 lg:h-screen lg:translate-x-0
        ${open ? 'translate-x-0' : '-translate-x-full'}
      `}>
        <button onClick={() => setOpen(false)} className="absolute right-3 top-3 lg:hidden ...">
          <X size={18} />
        </button>
        {/* nav content */}
      </aside>
    </>
  )
}