← Tutorials ← Next.js ← Dashboard
Next.js beginner 15 min

Dashboard Layout

Learn about Dashboard Layout in Next.js.

Next.js Dashboard with Sidebar, Top Navbar, and Footer

In this lesson you will build a complete dashboard layout using Next.js. The layout has a fixed top navigation bar, a left sidebar, a main content area, and a footer at the bottom.

Project Structure

app/
  dashboard/
    layout.tsx
    page.tsx
  components/
    TopNav.tsx
    Sidebar.tsx
    Footer.tsx
  globals.css

Step 1: Create the Sidebar Component

Save this code in app/components/Sidebar.tsx.

export default function Sidebar() {
  return (
    <aside className='w-64 h-screen bg-slate-800 text-white p-6'>
      <h2 className='text-xl font-bold mb-6'>Dashboard</h2>
      <nav className='space-y-4'>
        <a href='/dashboard' className='block hover:text-indigo-300'>Home</a>
        <a href='/dashboard/users' className='block hover:text-indigo-300'>Users</a>
        <a href='/dashboard/settings' className='block hover:text-indigo-300'>Settings</a>
      </nav>
    </aside>
  );
}

Step 2: Create the Top Navbar Component

Save this code in app/components/TopNav.tsx.

export default function TopNav() {
  return (
    <header className='bg-indigo-600 text-white p-4 flex justify-between items-center'>
      <h1 className='text-lg font-semibold'>My Dashboard</h1>
      <div className='flex items-center space-x-4'>
        <span>Welcome, User</span>
        <button className='bg-white text-indigo-600 px-3 py-1 rounded'>Logout</button>
      </div>
    </header>
  );
}

Step 3: Create the Footer Component

Save this code in app/components/Footer.tsx.

export default function Footer() {
  return (
    <footer className='bg-gray-100 border-t p-4 text-center text-sm text-gray-600'>
      &copy; 2026 My Dashboard. All rights reserved.
    </footer>
  );
}

Step 4: Create the Dashboard Layout

Save this code in app/dashboard/layout.tsx. This is where the sidebar, top navbar, and footer are combined.

import Sidebar from '../components/Sidebar';
import TopNav from '../components/TopNav';
import Footer from '../components/Footer';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <div className='flex h-screen'>
      <Sidebar />
      <div className='flex-1 flex flex-col'>
        <TopNav />
        <main className='flex-1 p-6 overflow-auto'>{children}</main>
        <Footer />
      </div>
    </div>
  );
}

Step 5: Create the Dashboard Page

Save this code in app/dashboard/page.tsx.

export default function DashboardPage() {
  return (
    <div>
      <h2 className='text-2xl font-bold mb-4'>Dashboard Overview</h2>
      <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
        <div className='bg-white shadow p-4 rounded'>
          <h3 className='font-semibold'>Users</h3>
          <p className='text-2xl'>1,234</p>
        </div>
        <div className='bg-white shadow p-4 rounded'>
          <h3 className='font-semibold'>Revenue</h3>
          <p className='text-2xl'>$12,000</p>
        </div>
        <div className='bg-white shadow p-4 rounded'>
          <h3 className='font-semibold'>Orders</h3>
          <p className='text-2xl'>456</p>
        </div>
      </div>
    </div>
  );
}

Step 6: Add Tailwind Styles

Make sure Tailwind CSS is installed. If you selected Tailwind during setup, your globals.css should already have the directives. If not, add these lines to app/globals.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Run the App

Start the Next.js development server:

npm run dev

Then open http://localhost:3000/dashboard in your browser. You should see the top navbar, sidebar, main content with cards, and footer.

Practice

Create the dashboard layout in a new Next.js app. Add one more card to the page and add one more link to the sidebar. Try changing the colors in the Tailwind classes.

Common Mistake

Forgetting to use the layout correctly. In the Next.js App Router, a layout wraps the page. Make sure the children prop is placed inside the main content area.

Navbar →