コンテンツにスキップ
Haramizu.com
Blog

Next.js + Tailwind CSS + shadcn/ui

最近話題の、UI コンポーネントの shadcn/ui をこのドキュメントでは評価していきます。shadcn/ui は、UI コンポーネントライブラリとして提供されており、npm パッケージとして提供する形ではないため、使いやすく、カスタマイズ可能なコンポーネントが豊富に揃っています。

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

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

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

プロジェクトを作成

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

shadcn/ui - Instrations Next.js

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

  1. 新しい Next.js のプロジェクトを作成します。

    • Next.js: 14.2.18
    • TypeScript: Yes
    • Tailwind CSS: Yes
    • App Router: No

    作成されたプロジェクトは以下の通りです。

    create-next-app

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

    Terminal window
    npx shadcn@latest init

    初期化の際に、以下の質問が表示されます。今回はほぼデフォルトで回答をしていきます。

    • Style: New York
    • base color: Neutral
    • CSS variables: yes

    npx shadcn@latest init

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

  • 新しく components.json および src/lib/utils.ts のファイルを追加
  • package.json に複数の新しいパッケージを追加 
    // package.json
      "dependencies": {
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "lucide-react": "^0.464.0",
        "next": "14.2.18",
        "react": "^18",
        "react-dom": "^18",
        "tailwind-merge": "^2.5.5",
        "tailwindcss-animate": "^1.0.7"
      },
  • tailwind.config.ts の更新
    • Darkmode の追加
    • Color の更新
    • plugin ( tailwindcss-animate ) の追加
  • globals.css の更新

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

コンポーネントの追加

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

Button

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

Terminal window
npx shadcn@latest add button

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

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

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

src/pages/index.tsx
import { Button } from '@/components/ui/button';


export default function Home() {
  return (
    <div className="m-10">
      <main>
        <Button>Click me</Button>
      </main>
    </div>
  );
}

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

Button

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

shadcn/ui Button

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

Terminal window
npx shadcn@latest add carousel

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

add carousel

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

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

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

Embla Carousel - React

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

src/pages/index.tsx
import { Button } from '@/components/ui/button';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';


export default function Home() {
  return (
    <div>
      <main>
        <div className="m-20">
          <Carousel>
            <CarouselContent>
              <CarouselItem>Item 1</CarouselItem>
              <CarouselItem>Item 2</CarouselItem>
              <CarouselItem>Item 3</CarouselItem>
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        </div>
        <div className="m-10">
          <Button>Click me</Button>
        </div>
      </main>
    </div>
  );
}

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

Carousel Test

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