Shadcn/uiで作るログイン後の管理画面レイアウト

Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成

初回公開日2025/8/8

最終更新日2025/8/8

0. ログイン画面ができたら次は…

前回の記事 「Shadcn/uiで作るログイン画面」 では、Shadcn/uiを使ってログイン画面のUIを作成しました。

ログインフォームができた時点で、次に必要になるのは「ログイン後に表示される画面」です。ということで今回は、ログイン後の管理画面として使うレイアウトを作っていきます。

とはいえ、レイアウトをゼロから組むのは大変です。 Shadcn/ui には 「Shadcn公式サイト：便利なテンプレート集」 が用意されています。これが、かなりできがいいというか、特に管理画面関連は十分という内容なのです。

▼Shadcn公式のテンプレート集

今回は、上掲のURLから「sidebar-07」を選んで組み込むことにしました。これは、下記のように各メニューにアイコンが付いて、サブメニューが展開されるものです。

この構成をベースに、今後のユーザー一覧や設定画面などでも再利用できる共通レイアウトを整えていきます。バックエンドの機能はまだ入れません。ひとまずUIだけ先に作っておく方針です。

前提

本記事は、前回の記事 **「Shadcn/uiで作るログイン画面」 **の続きとなります。ソースコードも前回記事を踏襲して、追加していきます。

もし、前回記事を読んでいない方は、Githubのリポジトリを用意しています。よろしければご利用ください。

◯利用方法：

zsh

git clone https://github.com/delogs-jp/login-form-ui.git

cd login-form-ui

# 依存ライブラリ
npm install

# Playwright ブラウザバイナリ
npx playwright install --with-deps

1. sidebar-07を使って土台をつくる

ログイン画面の次は、ログイン後の共通レイアウトを作っていきます。前章で述べたように、今回はShadcn/uiのテンプレート集から「sidebar-07」を使うことにしました。

まずは、「sidebar-07」をインストールします。 プロジェクトディレクトリへ移動してから 作業してください。

zsh

npx shadcn@latest add sidebar-07

これを実行すると、いくつかの依存パッケージが追加されたうえで、下記の18個のファイルが生成（うち、ログインフォームで利用している2個はスキップ）されます。

zsh

✔ Created 16 files:
  - src/app/dashboard/page.tsx
  - src/components/app-sidebar.tsx
  - src/components/nav-main.tsx
  - src/components/nav-projects.tsx
  - src/components/nav-user.tsx
  - src/components/team-switcher.tsx
  - src/components/ui/sidebar.tsx
  - src/components/ui/separator.tsx
  - src/components/ui/sheet.tsx
  - src/components/ui/tooltip.tsx
  - src/hooks/use-mobile.ts
  - src/components/ui/skeleton.tsx
  - src/components/ui/breadcrumb.tsx
  - src/components/ui/collapsible.tsx
  - src/components/ui/dropdown-menu.tsx
  - src/components/ui/avatar.tsx
ℹ Skipped 2 files: (files might be identical, use --overwrite to overwrite)
  - src/components/ui/button.tsx
  - src/components/ui/input.tsx

見ての通り、かなりしっかりした構成が最初から用意されているのがわかります。これだけで、サイドメニュー／上部ナビ／ユーザーメニューまでだいたい揃います。

`/dashboard` を開いてみる

コマンド実行後は /dashboard ページが生成されているので、開いてみると、すでに以下のような画面が表示されるはずです。

src/app/dashboard/page.tsxの内容：

tsx

import { AppSidebar } from "@/components/app-sidebar"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator
              orientation="vertical"
              className="mr-2 data-[orientation=vertical]:h-4"
            />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href="#">
                    Building Your Application
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}

npm run devを実行してhttp://localhost:3000/dashboardにアクセスして見てください。下記のように、ダークモード対応以外の管理画面フォーマットがすでに作られた状態になっているのが確認できます。

サイドバー（メニュー付き）
上部にユーザーアイコン（クリックでドロップダウン）
中央にページコンテンツ（まだ空）
ユーザ情報エリア
レスポンシブ対応済み

どうでしょうか。この時点で、もう十分な完成形になっています。

次章では、生成された各ファイルの役割（app-sidebar.tsx, nav-main.tsx, など）を解説しながら、再利用のしやすさや削れる部分も見ていく予定です。

また、そのあとに 「ダークモード切替UI」 を導入する章を追加して、ThemeToggle の実装にも触れていきます。

2. 各パーツの構成をざっと見ておく

sidebar-07を追加すると、けっこう多くのコンポーネントが生成されます。実際に使うのは一部ですが、ここで一度構成をざっと見ておきます。

生成された中から、特によく使う（or 編集する）ファイルは以下です。

全体のレイアウト構成に関わるファイル

ファイル	内容
`src/app/dashboard/page.tsx`	ダッシュボードのトップページ（最初に表示されるページ）
`src/components/app-sidebar.tsx`	サイドバー全体のラッパー。`nav-main.tsx`などを内包
`src/components/nav-main.tsx`	メインナビゲーション（Dashboard, Usersなど）
`src/components/nav-user.tsx`	右上のユーザーメニュー（ログアウトなど）

モバイル表示や拡張用の補助コンポーネント

ファイル	内容
`src/hooks/use-mobile.ts`	ビューポートの幅を見てモバイル表示かどうかを判定するカスタムフック
`src/components/ui/sheet.tsx`	モバイル用のスライドオーバーメニューに使う部品
`src/components/ui/separator.tsx`	区切り線（メニュー間の仕切り）などで使用

ユーザーやチーム切り替え関連（今回は省略可能）

ファイル	コメント
`src/components/nav-projects.tsx`	プロジェクト切り替えUI。今回は不要なので削除してOK
`src/components/team-switcher.tsx`	ヘッダの最上部のチーム切り替え。こちらも今回は使わないですが、1チームとしてロゴ配置に利用します

今回は「管理画面の共通レイアウト」を作るのが目的なので、上記の中でも使わない部分（プロジェクト切り替え、チーム切り替えなど）は削除していきます。

次の章では、これらのコンポーネントを少し調整しながら、仮のユーザー情報を渡して表示確認をしていきます。

3. 仮データを分離して、見通しを良くする

sidebar-07 を追加すると、src/components/app-sidebar.tsx にけっこうな量の仮データが含まれた状態になります。 user・navMain・teams・projectsなどがすべて1ファイルに詰め込まれていて、正直なところかなり見づらいです。

tsx

// src/components/app-sidebar.tsx（初期状態）
const data = {
  user: { ... },
  navMain: [ ... ],
  teams: [ ... ],
  projects: [ ... ],
}

でも実際のところ、これらのデータはそれぞれ 使うコンポーネントが完全に分かれています。 それなら、用途ごとにファイルを分けておいたほうが、後からの差し替えやメンテナンスもしやすくなります。

必要なものだけ、個別ファイルで管理

そこで今回は、仮データを以下のように切り出しました(projectsは今回は使わないです)：

データ用途	ファイル	型も一緒に定義
ユーザー情報	`lib/mock-user.ts`	✅ `User`型
メインメニュー	`lib/mock-nav-main.ts`	✅ `NavItem`型
チーム情報(今回は1チームだけ)	`lib/mock-team.ts`	✅ `Team`型

上記のファイルで、 「型とデータをセットで定義してエクスポートする」 方式にします。

例：mock-user.ts

// lib/mock-user.ts

export type User = {
  name: string;
  email: string;
  avatar: string;
};

export const mockUser: User = {
  name: "山田 太郎",
  email: "yamada@example.com",
  avatar: "/user-avatar.png",
};

このように、データの構造と中身をセットで管理しておくと、後から User 型だけをUI側で再利用することができます。

💡 avatarで指定する画像は、プロジェクト直下の public/user-avatar.png などに配置しておけば、/user-avatar.png のようにそのまま指定できます。

同様に、lib/mock-nav-main.tsとlib/mock-teams.tsを作成します。

例：mock-nav-main.ts

これはサイドメニューの各項目に該当する部分です。メニュー項目はプロジェクト管理を想定して下記のようにしてみました。

ts : mock-nav-main.ts

import {
  BookOpen,
  Settings2,
  SquareTerminal,
  type LucideIcon,
} from "lucide-react";

export type NavItem = {
  title: string;
  url: string;
  icon?: LucideIcon;
  isActive?: boolean;
  items?: {
    title: string;
    url: string;
  }[];
}[];

export const mockNavMain: NavItem = [
  {
    title: "ダッシュボード",
    url: "/dashboard",
    icon: SquareTerminal,
    isActive: true,
    items: [
      {
        title: "全体進捗",
        url: "#",
      },
      {
        title: "Myプロジェクト",
        url: "#",
      },
      {
        title: "Myタスク",
        url: "#",
      },
    ],
  },
  {
    title: "ドキュメント",
    url: "#",
    icon: BookOpen,
    items: [
      { title: "チュートリアル", url: "#" },
      { title: "更新履歴", url: "#" },
    ],
  },
  {
    title: "設定",
    url: "#",
    icon: Settings2,
    items: [
      {
        title: "プロジェクト管理",
        url: "#",
      },
      {
        title: "マスタ管理",
        url: "#",
      },
      {
        title: "ユーザ管理",
        url: "#",
      },
    ],
  },
];

上記のように、ルシードアイコンもこちらで定義することになります。

例：lib/mock-team.ts

ここは少し項目名も変更しています。1つだけの情報にして、下記のようにしています。

export type Team = {
  name: string;
  icon: string;
  lead: string;
};

export const mockTeam: Team = {
  name: "DELOGs",
  icon: "/icon-64.png",
  lead: "Demo Dashboard",
};

UIコンポーネントでの使い方例

詳細は次章で実施します。ここでは例として流れだけです。

たとえば nav-user.tsx では、データ本体は使わずに、型だけを読み込んでいます：

tsx

// src/components/nav-user.tsx

import type { User } from "@/lib/mock-user"

export function NavUser({ user }: { user: User }) {
  ...
}

UI側では「型」だけを参照し、実際の値は app-sidebar.tsx で mockUser を渡すようにしています。

app-sidebar.tsxの方は下記のようになります：

tsx

import { mockUser } from "@/lib/mock-user"
import { mockNavMain } from "@/lib/mock-nav-main"
import { mockProjects } from "@/lib/mock-projects"
import { mockTeams } from "@/lib/mock-teams"

...

<TeamSwitcher teams={mockTeams} />
<NavMain items={mockNavMain} />
<NavProjects projects={mockProjects} />
<NavUser user={mockUser} />

仮データの中身は lib/ 側で管理し、app-sidebar.tsx 側は UIに必要なデータだけを読み込む構成になります。

将来的な実データへの差し替えも簡単

この構成にしておけば、実装が進んだ段階で下記のように切り替えることが可能です：

tsx

// 今は mock
import { mockUser } from "@/lib/mock-user"

// 将来は API などに差し替え
const user: User = await fetchCurrentUser()

User 型は共通なので、UI側のコードに手を加える必要がないというのが大きな利点です。

これで仮データの扱いがシンプルになり、UI構築を進めるうえでも見通しがぐっと良くなります。

次の章では、この構成を活かして /dashboard ページに共通レイアウトを組み込み、今後、他の管理画面上のページでも使い回せるようなベースを整えていきます。

4. ナビゲーション関連コンポーネントを整える

前章で、user・navMain・team の仮データを lib/ に切り出しました。これらを受け取る側の UI コンポーネントも、それに合わせて修正していきます。

ポイントは以下の3つです。

1. propsでデータを受け取るようにする
コンポーネントが内部で仮データを持つのではなく、外から渡されたデータを描画します。

2. 型定義を共通化
lib/mock-xxx.ts にある型（User・NavItem・Team）をimportして、propsの型として利用します。

3. チーム切替UIを簡略化
今回は1チームしかない前提なので、team-switcher.tsxはnav-team.tsxとして作り直します。

ユーザーメニュー `nav-user.tsx`の修正

tsx

// src/components/nav-user.tsx
"use client";

import {
  Bell,
  ChevronsUpDown,
  KeyRound,
  LogOut,
  User as UserIcon,
} from "lucide-react";

import type { User } from "@/lib/mock-user";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";

export function NavUser({ user }: { user: User }) {
  const { isMobile } = useSidebar();

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
              aria-label="ユーザーメニューを開く"
            >
              <Avatar className="h-8 w-8 rounded-lg">
                {/* 画像は next/image でもOKだが AvatarImage で十分 */}
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">
                  {user.name.slice(0, 1)}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="text-muted-foreground truncate text-xs">
                  {user.email}
                </span>
              </div>
              <ChevronsUpDown className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>

          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            align="end"
            sideOffset={4}
          >
            {/* ヘッダー（ユーザー情報の再掲） */}
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarImage src={user.avatar} alt={user.name} />
                  <AvatarFallback className="rounded-lg">
                    {user.name.slice(0, 1)}
                  </AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
                  <span className="text-muted-foreground truncate text-xs">
                    {user.email}
                  </span>
                </div>
              </div>
            </DropdownMenuLabel>

            <DropdownMenuSeparator />

            <DropdownMenuGroup>
              <DropdownMenuItem asChild>
                {/* TODO: /account などに差し替え */}
                <a href="#" className="flex items-center gap-2">
                  <UserIcon className="size-4" />
                  ユーザー情報確認
                </a>
              </DropdownMenuItem>

              <DropdownMenuItem asChild>
                {/* TODO: /account/password などに差し替え */}
                <a href="#" className="flex items-center gap-2">
                  <KeyRound className="size-4" />
                  パスワード変更
                </a>
              </DropdownMenuItem>

              <DropdownMenuItem asChild>
                {/* TODO: /notifications に差し替え */}
                <a href="#" className="flex items-center gap-2">
                  <Bell className="size-4" />
                  通知
                </a>
              </DropdownMenuItem>
            </DropdownMenuGroup>

            <DropdownMenuSeparator />

            <DropdownMenuItem asChild>
              {/* TODO: /api/logout などにPOST。UIだけなら href="#" でOK */}
              <a href="#" className="text-destructive flex items-center gap-2">
                <LogOut className="size-4" />
                ログアウト
              </a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}

💡変更ポイント

英語ラベル（Upgrade to Pro / Account / Billing…）を削除し、4項目に絞って日本語化。
User 型は @/lib/mock-user から import。any は未使用。
見た目のトーンは shadcn のまま、アクセシビリティ用の aria-label と muted なテキストを追加。
リンクは暫定で href="#"。後で /account, /account/password, /notifications, POST /api/logout へ差し替え想定。

メインナビ `nav-main.tsx`の修正

tsx

// src/components/nav-main.tsx
"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";

import type { NavItem } from "@/lib/mock-nav-main";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";

type Props = { items: NavItem };

export function NavMain({ items }: Props) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>メニュー</SidebarGroupLabel>

      <SidebarMenu>
        {items.map((item) => {
          const hasChildren = !!item.items?.length;

          // 子がない場合は Collapsible を使わずにそのままリンク
          if (!hasChildren) {
            return (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton
                  asChild
                  className={item.isActive ? "bg-muted font-semibold" : ""}
                  tooltip={item.title}
                  aria-current={item.isActive ? "page" : undefined}
                >
                  <Link href={item.url}>
                    {item.icon && <item.icon className="size-4" />}
                    <span>{item.title}</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            );
          }

          // 子がある場合は Collapsible（開閉可）
          return (
            <Collapsible
              key={item.title}
              asChild
              defaultOpen={item.isActive}
              className="group/collapsible"
            >
              <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                  <SidebarMenuButton
                    tooltip={item.title}
                    className={item.isActive ? "bg-muted font-semibold" : ""}
                    aria-expanded={item.isActive ? true : undefined}
                  >
                    {item.icon && <item.icon className="size-4" />}
                    <span>{item.title}</span>
                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                  </SidebarMenuButton>
                </CollapsibleTrigger>

                <CollapsibleContent>
                  <SidebarMenuSub>
                    {item.items?.map((sub) => (
                      <SidebarMenuSubItem key={sub.title}>
                        <SidebarMenuSubButton asChild>
                          <Link href={sub.url}>
                            <span>{sub.title}</span>
                          </Link>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    ))}
                  </SidebarMenuSub>
                </CollapsibleContent>
              </SidebarMenuItem>
            </Collapsible>
          );
        })}
      </SidebarMenu>
    </SidebarGroup>
  );
}

💡変更ポイント

type Props = { items: NavItem }（※mock-nav-main.ts の「配列型エイリアス」に合わせています）
サブメニューなしは Link 直、サブメニューありは Collapsible で開閉可能に
isActive のとき bg-muted font-semibold を付与
すべて next/link に統一、aria-current/aria-expanded を適宜付与
ラベルを「Platform」→「メニュー」に変更

`nav-team.tsx` の新規作成

sidebar-07 では、チーム切り替え用に team-switcher.tsx というコンポーネントが用意されていました。ただ、今回の構成では「チームは1つのみ」を前提としており、切り替え機能自体は不要です。

そこで、よりシンプルにチーム情報を表示する専用コンポーネントとして nav-team.tsx を新規作成します。

複数チームのドロップダウンなどは省略
lib/mock-team.ts の Team 型に合わせて props を受け取る
チーム名とリード文を表示
アイコンは public/icon-64.png を使用（例）

tsx

// src/components/nav-team.tsx
"use client";

import Image from "next/image";

import type { Team } from "@/lib/mock-team";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavTeam({ team }: { team: Team }) {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size="lg"
          className="cursor-default"
          aria-label="チーム情報"
        >
          <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center overflow-hidden rounded-lg">
            <Image
              src={team.icon}
              alt={team.name}
              width={32}
              height={32}
              priority
              className="object-contain"
            />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-medium">{team.name}</span>
            <span className="text-muted-foreground truncate text-xs">
              {team.lead}
            </span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}

💡補足ポイント

見た目は SidebarMenuButton を再利用しており、クリックしても何も起きません（cursor-defaultで無効化）
team.icon は public/ 配下に配置した画像を指定しておけば、/icon-64.png のようにそのまま読み込めます
SidebarMenu の一部として統一感ある見た目になります

次章では、これらの共通コンポーネントを app-sidebar.tsx に読み込んで表示する構成を整えていきます。

5. Sidebar全体の構成を整理する ─ 仮データ脱却と不要UIの削除

前章までで、仮データをlib/配下に分離し、それぞれのUIコンポーネントも props 経由で受け取るように整理しました。

ここでは、サイドバー全体を司る AppSidebar コンポーネント（src/components/app-sidebar.tsx）を整理して、共通レイアウトとしてのベースを完成させます。

修正前の構成（テンプレート状態）

初期状態の AppSidebar は、下記のように全データが内部のdataオブジェクトに直書きされており、サイドバー内の構成もかなり多機能に設計されています。

tsx

// 修正前の構成イメージ
<Sidebar>
  <SidebarHeader>
    <TeamSwitcher teams={data.teams} />
  </SidebarHeader>
  <SidebarContent>
    <NavMain items={data.navMain} />
    <NavProjects projects={data.projects} />
  </SidebarContent>
  <SidebarFooter>
    <NavUser user={data.user} />
  </SidebarFooter>
  <SidebarRail />
</Sidebar>

この構成には以下のような課題があります：

課題	内容
`data` の肥大化	全ての仮データが1ファイルに詰め込まれていて見通しが悪い
使わないUIの混在	今回の構成ではチーム切り替え・プロジェクト切り替えは不要

今回の構成方針

下記のような シンプルかつ拡張性ある構成 へ移行します：

tsx

<Sidebar collapsible="icon">
  <SidebarHeader>
    <NavTeam team={mockTeam} />
  </SidebarHeader>
  <SidebarContent>
    <NavMain items={mockNavMain} />
  </SidebarContent>
  <SidebarFooter>
    <ModeToggle />
    <NavUser user={mockUser} />
  </SidebarFooter>
  <SidebarRail />
</Sidebar>

仮データの参照元はすべて lib/ に切り出したものを使用
チーム表示は NavTeam に置き換え（切り替え機能は不要）
NavProjects は削除

修正後の `app-sidebar.tsx`

tsx

// src/components/app-sidebar.tsx
"use client";

import * as React from "react";

import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import { NavTeam } from "@/components/nav-team";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar";

import { mockTeam } from "@/lib/mock-team";
import { mockNavMain } from "@/lib/mock-nav-main";
import { mockUser } from "@/lib/mock-user";

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <NavTeam team={mockTeam} />
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={mockNavMain} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={mockUser} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}

変更点のまとめ

項目	変更内容
✅ データ分離	`data`オブジェクトを完全に削除し、すべて `lib/` から import
✅ コンポーネント整理	`TeamSwitcher`, `NavProjects`, `SidebarRail` を削除
✅ 構成簡略化	最小限の構成（チーム表示・メニュー・ユーザーメニュー）に絞る
✅ 型安全化	`mock-user.ts`, `mock-team.ts`, `mock-nav-main.ts` にて型定義付きで管理

ここまでできたら、npm run devでテスト起動してみてください。下記にようになります。

今後の展開に向けて

今回の修正によって、AppSidebar は以下のような状態になりました：

全ての表示データが外部管理になり、UIコンポーネントは props を受け取って描画する構造
1チーム前提／1プロジェクト前提という現時点での実装に合わせて最適化
今後、実データ化する際もUIに変更は不要 （mock → APIやサーバアクションへの切替のみ）

この共通レイアウトは、今後のユーザー管理画面や設定画面、ダッシュボードの各種ページでも再利用可能です。

次章では、ここに ダークモード切替UI （ModeToggle）を導入して、ナイトモードへの切替に対応する実装を行っていきます。

6. ダークモード切り替えUIの導入

ここまでで、共通レイアウトとしての AppSidebar を完成させました。次は、現代的なUIに欠かせない? 「ダークモードの切り替え機能」を実装していきます。これは不要な方は飛ばしてください。

今回は、Shadcn/uiの公式ドキュメントでも紹介されている next-themes を使って、テーマ切り替えが可能な構成を整えます。

参考： 「Shadcn公式：Dark Mode（Next.js版）」

`next-themes` のインストール

まずは、テーマ切り替えを扱うためのライブラリ next-themes をインストールします。

zsh

npm install next-themes

このパッケージは、localStorage にテーマ設定を保持しつつ、<html class="dark"> のようなクラス切り替えを自動で行ってくれる便利なライブラリです。

`ThemeProvider` の追加

App Routerに合わせた ThemeProvider を自前で定義します。

下記のような src/components/theme-provider.tsx を作成してください：

tsx

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

この ThemeProvider を、アプリ全体のルートで使えるように src/app/layout.tsx に組み込みます。

tsx

// src/app/layout.tsx
import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";

const notoSansJP = Noto_Sans_JP({
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
});

export const metadata: Metadata = {
  title: "管理画面レイアウト【DELOGs】",
  description: "shadcn/uiを使用した管理画面レイアウト",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja" suppressHydrationWarning>
      <body className={`${notoSansJP.variable} font-sans antialiased`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

💡 suppressHydrationWarning ってなに？
next-themes はクライアントでテーマ状態を動的に変えるため、サーバ側とクライアント側で className（例：light or dark）が一致しないタイミングが起き得ます。
これによりNext.jsが警告（hydration mismatch）を出すため、それを抑制するのが suppressHydrationWarning です。

💡 ThemeProvider に渡している各属性は、ダークモードの挙動を細かく制御するための設定です。ひとつずつ解説します。

属性名	役割
`attribute="class"`	HTMLの`<html>`タグに `class="dark"` を付ける方式でダークモードを制御します。Tailwind CSS の `darkMode: "class"` 設定と連動しているため、これが必須です。
`defaultTheme="system"`	初期状態では、ユーザーのOSの設定（ライト or ダーク）を自動で使います。個別にテーマを指定しない限り、常にOSの設定に追従します。
`enableSystem`	上記の`defaultTheme="system"`が有効に動作するようにします。これがないとOSのテーマ設定が反映されません。
`disableTransitionOnChange`	テーマ切り替え時に不要なアニメーション（フェードやズームなど）が発生しないようにします。画面のちらつきを防げるため、UXが向上します。

ダークモード切り替えボタンの設置

次に、ユーザーが「ライト／ダーク」を切り替えるためのUIを作ります。

下記のように src/components/mode-toggle.tsx を作成します：

tsx

// src/components/mode-toggle.tsx
"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";

type Props = {
  className?: string;
};

export function ModeToggle({ className }: Props) {
  const { setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = React.useState(false);

  // クライアントマウント後にのみ実行（SSRと一致）
  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <Button
        variant="ghost"
        size="icon"
        className={className}
        aria-label="テーマ切り替え（読み込み中）"
        disabled
      >
        <Sun className="size-4 animate-pulse opacity-50" />
      </Button>
    );
  }

  const isDark = resolvedTheme === "dark";

  return (
    <Button
      variant="ghost"
      size="icon"
      className={className}
      aria-label="ダークモード切り替え"
      onClick={() => setTheme(isDark ? "light" : "dark")}
    >
      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}

💡 実装ポイント

Shadcn/UI公式のドキュメントだと、ドロップダウンメニューを使ったものになっているので、改変しています。

項目	内容
`useTheme()`	`next-themes` からテーマの取得／変更機能を提供。 `setTheme()`でテーマ変更、`resolvedTheme`で現在の実際のテーマを取得。
`useEffect()`	クライアントマウント後に `mounted = true` をセット。 SSRとのテーマ不一致（Hydrationエラー）を防ぐための措置。
`!mounted`時の描画	初期マウント前は `Sun` アイコンをアニメーション付きで表示。読み込み中であることを視覚的に伝える。
テーマ状態の判定	`resolvedTheme === "dark"` なら `isDark = true`。状態に応じて `Sun`／`Moon` アイコンを切り替え。
ボタンの切り替え動作	現在がダークモードならライトへ、ライトならダークへ切り替える挙動に設定。
`className`対応	`props.className` を受け取って `<Button>` に渡すことで、呼び出し側からのレイアウト調整が可能に。

`AppSidebar` に組み込む

作成した ModeToggle を AppSidebar.tsx のフッター内に組み込みます。

tsx

"use client";

import * as React from "react";

import { ModeToggle } from "@/components/mode-toggle"; //mode-toggle.tsxの読み込みを追加
import { NavMain } from "@/components/nav-main";

・・・省略・・・

      <SidebarFooter>
        <ModeToggle className="ml-auto" /> {/* トグルボタンを右寄せで配置 */}
        <NavUser user={mockUser} />
      </SidebarFooter>

・・・省略・・・

実際の見た目としては、ユーザーアイコンの上に月（または太陽）マークが追加され、それをクリックすることで即時テーマが切り替わります。

Tailwind CSS 側の設定確認

src/app/globals.css において、.darkクラスが設定されていることを確認します。

css

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

Shadcn/uiをインストールすると自動で挿入されるエリアになります。念のため確認しておきましょう。上記を調整することで、ダークモードの配色の調整が可能です。

ここまでの作業で、管理画面レイアウトに「ライト／ダーク切り替えUI」が追加されました。

テーマは localStorage に保存され、次回以降も自動で反映されます。
サーバとのレンダリング差異は suppressHydrationWarning で回避
Tailwind + Shadcnの class="dark" 構成で自動的に切り替わります

実際にnpm run devでlocalhost:3000/dashboardにアクセスすると下記のようにダークモードが体験できます。

（補足）ログイン画面のロゴ切り替え

最後に補足になります。私が用意しているログイン画面のロゴ画像が文字色黒の画像なので、ダークモードだと見えなくなります。このようなケースで表示モードによって、ロゴ画像を切り替える方法についても記載しておきます。

src/app/page.tsxがログイン画面に当たりますので、これを修正します。

tsx

・・・省略・・・
    <main className="flex min-h-svh w-full items-center justify-center bg-gray-800 p-6 md:p-10 dark:bg-neutral-800">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="flex justify-center">
            {/* light用ロゴ（＝ダークモード時に非表示） */}
            <Image
              src="/logo.svg"
              alt="サイトロゴ"
              width={160}
              height={40}
              priority
              className="h-[40px] w-[160px] dark:hidden"
            />

            {/* dark用ロゴ（＝ダークモード時に表示） */}
            <Image
              src="/logo-d.svg"
              alt="サイトロゴ（ダーク）"
              width={160}
              height={40}
              priority
              className="hidden h-[40px] w-[160px] dark:block"
            />
          </CardTitle>
        </CardHeader>
        <CardContent>
          <LoginForm />
        </CardContent>
      </Card>
    </main>
・・・省略・・・

上記のような感じです。TailwindCSSのdark:でダークモードのときのCSS指定が可能です。ここでは<main>タグの背景色とロゴ画像の表示切り替えをしました。ロゴはダークモード用に白文字の画像を用意して切り替えています。page.tsxはサーバサイドレンダリングで統一したいので、上記のようにしています。

更に補足ですが、クライアントサイドのレンダリング時はもっときれいに：

tsx

"use client";

import Image from "next/image";
import { useTheme } from "next-themes";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import LoginForm from "@/components/LoginForm";

export default function Page() {
  const { resolvedTheme } = useTheme();

  const logoSrc =
    resolvedTheme === "dark" ? "/logo-dark.svg" : "/logo.svg";

  return (
    <main className="flex min-h-svh w-full items-center justify-center bg-gray-800 p-6 md:p-10">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="flex justify-center">
            <Image
              src={logoSrc}
              alt="サイトロゴ"
              width={160}
              height={40}
              priority
              className="h-[40px] w-[160px]"
            />
          </CardTitle>
        </CardHeader>
        <CardContent>
          <LoginForm />
        </CardContent>
      </Card>
    </main>
  );
}

のような書き方も可能です。useTheme()を利用して、表示モードを判定するやり方です。

以上で、管理画面レイアウトは完了です。Shadcn/UIのおかげでかなり簡単に完了しました。

次回以降の記事では、ユーザ登録やユーザ一覧などのUIについて実践した内容を掲載予定です。

参考文献

Shadcn/ui - Templates（公式）
今回のレイアウトテンプレート sidebar-07 を取得した元ソースです。実装における命名やUI構成もこちらに準拠しています。
Shadcn/ui - Dark Mode（Next.js）
next-themes を用いたダークモード切り替え構成を公式が案内しているページです。ThemeProvider の構成や注意点について記述があります。
next-themes（GitHub）
テーマ切り替えの中核ライブラリで、useTheme() の仕様や、SSR時の注意点などが記載されています。
Tailwind CSS - Dark Mode
dark: クラスの使い方や class 方式での切り替え構成についての基本ドキュメントです。

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

▼ 関連記事

Shadcn/uiで作るログイン画面

Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践

2025/7/24公開

Next.js+shadcn/uiのインストールと基本動作のまとめ

開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認

2025/6/20公開

Shadcn/uiで作るログイン後の管理画面レイアウト

0. ログイン画面ができたら次は…

前提

1. sidebar-07を使って土台をつくる

/dashboard を開いてみる

2. 各パーツの構成をざっと見ておく

全体のレイアウト構成に関わるファイル

モバイル表示や拡張用の補助コンポーネント

ユーザーやチーム切り替え関連（今回は省略可能）

3. 仮データを分離して、見通しを良くする

必要なものだけ、個別ファイルで管理

例：mock-user.ts

例：mock-nav-main.ts

例：lib/mock-team.ts

UIコンポーネントでの使い方例

将来的な実データへの差し替えも簡単

4. ナビゲーション関連コンポーネントを整える

ユーザーメニュー nav-user.tsxの修正

💡変更ポイント

メインナビ nav-main.tsxの修正

💡変更ポイント

nav-team.tsx の新規作成

💡補足ポイント

5. Sidebar全体の構成を整理する ─ 仮データ脱却と不要UIの削除

修正前の構成（テンプレート状態）

今回の構成方針

修正後の app-sidebar.tsx

変更点のまとめ

今後の展開に向けて

6. ダークモード切り替えUIの導入

next-themes のインストール

ThemeProvider の追加

ダークモード切り替えボタンの設置

💡 実装ポイント

AppSidebar に組み込む

Tailwind CSS 側の設定確認

（補足）ログイン画面のロゴ切り替え

参考文献

`/dashboard` を開いてみる

ユーザーメニュー `nav-user.tsx`の修正

メインナビ `nav-main.tsx`の修正

`nav-team.tsx` の新規作成

修正後の `app-sidebar.tsx`

`next-themes` のインストール

`ThemeProvider` の追加

`AppSidebar` に組み込む