Next.js x shadcnでサイトにサイドバーを導入する

ブログやWebサービスを提供するとき、コンテンツや機能が増えてくるとメニューを提供する必要性も増えてくると思います。

メニューを提供する方法の1つにサイドバーで提供する方法があります。今回は、話題になっているshadcnというライブラリをNext.jsプロジェクトで活用する方法について紹介していきます。

shadcnについて

shadcnは、コンポーネントをプロジェクト内に直接追加する形で利用することができるデザインシステムです。

従来のライブラリと異なる点は、パッケージとして利用するのではなく、プロジェクト内にコードを追加することでビルドに乗せることができます。今回は、Sidebarの導入を例として紹介していきます。

shadcnで提供されているサイドバーのコンポーネントについて紹介していきます。shadcnのサイドバーは、大きくSidebar / Header / Content / Footer の4つのコンポーネントに分けることができます。

ヘッダー / コンテンツ / フッターを含む全ての要素を含む大枠のコンポーネントです。各種コンポーネントはこのコンポーネント内に設置します。

サイドバーの最上部に固定されるコンポーネントです。タイトルやロゴなどサイトの顔となる情報を伝えるためのエリアです。

サイドバーの下部に固定されるコンポーネントです。補足情報などコンテンツには直接関係のない情報などを伝えるためのエリアです。

サイドバーとフッターの間に表示される、サイドバーの主要素を一覧表示するためのコンポーネントです。いくつかの要素をグループ化するSidebarGroupというコンポーネントも存在します。

##コンポーネント追加方法 shadcnでSidebarコンポーネントをプロジェクトに追加するには、以下のコマンドを実行します。

$ npx shadcn@latest add sidebar

上記のコマンドを実行すると、コードベースにSidebarコンポーネントのコードを追加されます。

サイドバーを追加することで、各ページへのナビゲーションを提供したりコンテンツに関連する補足情報を読者へ伝えることができます。これらを追加することでページのコンテンツを充実させ、読者がより情報を集めやすくする仕組みを充実させていきましょう。