Next.js + Tailwind CSS + shadcn/ui

主なメリットは以下のようになります。

• 開発速度の向上: 既存のコンポーネントを利用することで、UIの開発時間を短縮できます。
• 一貫性のあるデザイン: 統一されたデザインガイドラインに従うことで、アプリケーション全体のデザインの一貫性を保てます。
• メンテナンスの容易さ: コンポーネントベースのアーキテクチャにより、コードの再利用性が高まり、メンテナンスが容易になります。

このドキュメントでは、 Next.js のプロジェクトをベースに、 Pages Router としての利用を評価していきます。

プロジェクトを作成

まず最初に、Next.js のプロジェクトの作成をします。手順に関しては以下のページを参考にして進めて行きます。

• shadcn/ui - Instrations Next.js

それでは早速、プロジェクトを作成して行きます

• 新しい Next.js のプロジェクトを作成します。作成されたプロジェクトは以下の通りです。
  • Next.js: 14.2.18
  • TypeScript: Yes
  • Tailwind CSS: Yes
  • App Router: No

• shadcn を利用するための初期化を行います

• 初期化の際に、以下の質問が表示されます。今回はほぼデフォルトで回答をしていきます。
  • Style: New York
  • base color: Neutral
  • CSS variables: yes

初期化後に変わっているファイルを確認します。

• 新しく components.json および src/lib/utils.ts のファイルを追加
• package.json に複数の新しいパッケージを追加

• tailwind.config.ts の更新
  • Darkmode の追加
  • Color の更新
  • plugin ( tailwindcss-animate ) の追加
• globals.css の更新

これで準備が整いました。

コンポーネントの追加

早速コンポーネントをいくつか追加して行きます。

Button

インストール手順に記載されているボタンを追加します。

プロジェクトの更新を確認すると以下のようになります。

• コンポーネントファイル src/components/ui/button.tsx の追加
• パッケージ @radix-ui/react-slot の追加

これで利用できるコンポーネントが追加されました。トップページを以下のように変更しました。

ボタンが表示されるようになりました。

Button に関しては以下のページでより詳細な利用方法が記載されています。

• shadcn/ui Button

Carousel

続いて Web サイトを作る時の練習によく使われる Carousel を追加します。

button.tsx があるが上書きするか？という質問が表示されます。

上書きを選択して、プロジェクトの更新が完了となります。変更点を確認すると以下のようになります。

• コンポーネントファイル src/components/ui/carousel.tsx の追加
• パッケージ embla-carousel-react の追加

shadcn/ui の Carousel は embla-carousel-react を利用していることになります。このパッケージの公式サイトは以下の通りです。

• Embla Carousel - React

作成されたコンポーネントを先ほどと同様にトップページに配置します。

実際の動作している模様は、以下のようになります。

Carousel に関しては以下のページでより詳細な利用方法が記載されています。

• shadcn/ui Carousel

まとめ

今回は Button と Carousel のみを紹介しましたが、さまざまな UI が用意されており、これを利用することでより簡単にサイトで利用するコンポーネントを利用することが可能となります。

今回、ここで紹介をした Next.js のプロジェクトは以下のリポジトリで公開をしています。

• haramizu / Next.js sample - tailwind-shadcn-pages

参考情報

• chadcn/ui
• shadcn/ui - Instrations Next.js
• shadcn/ui Button
• shadcn/ui Carousel