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

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

初回公開日2025/6/20

最終更新日2025/7/26

Next.jsとshadcn/uiをインストールしていきます。プロジェクトを始める前にやる作業なので、何度も行うのですが、忘れがちなので、いつも使っているツールも含めて備忘録として記載しておきます。

ローカルPCの環境は、appleシリコンのmacOSになります。標準ターミナルとVScodeでの作業しています。

nodeとnpmをインストールしていない場合は、これのインストールから始めます。

1. （事前準備）nodeのインストール

macOSではHomebrewを利用してインストール方法もあるのですが、少しバージョンが古いことがあるので、私はいつも「n」という管理ツールを利用しています。

「n」のインストール

zsh

curl -L https://bit.ly/n-install | bash

インストールが完了したら、一度シェルをリロード：

zsh

source ~/.zshrc  # もしくは source ~/.bash_profile

Node.js のインストール

zsh

sudo n lts

動作確認

zsh

node -v
npm -v

エラーが出ずにバージョンが表示されれば成功！

もし node -v が command not found になる場合は、パスの問題かもしれないので以下を実行：

zsh

export PATH="/usr/local/bin:$PATH"

source ~/.zshrc  # zsh の場合
source ~/.bash_profile  # bash の場合

これで準備完了です。

2. Next.jsをインストール

new-appという新規プロジェクトを/xxxx/xxxx/project/new-appというディレクトリに作成するものとします。

インストール

まずは親ディレクトリとなる/xxxx/xxxx/projectへ移動します。

zsh

cd /xxxx/xxxx/project

下記のコマンドを実行：

zsh

npx create-next-app@latest

zsh

Need to install the following packages:
create-next-app@15.3.4
Ok to proceed? (y) 

##上記で(y)を入力してエンターで下記の質問が返ってきます。
## 最初のプロジェクト名がディレクトリ名になるので作りたい名称を入力します。
## 他は基本はデフォルトの選択でいいと思いますが、お好みでNo/yesを選択します。

? What is your project named? › new-app
? Would you like to use TypeScript? › No / Yes
? Would you like to use ESLint? › No / Yes
? Would you like to use Tailwind CSS? › No / Yes
? Would you like your code inside a `src/` directory? › No / Yes
? Would you like to use App Router? (recommended) › No / Yes
? Would you like to use Turbopack for `next dev`? › No / Yes
? Would you like to customize the import alias (`@/*` by default)? › No / Yes

## 質問へ回答するとインストールが始まります。

Success! Created new-app at /xxxx/xxxx/project/new-app

ここでの質問ですが、下記のような意味になります。

What is your project named?
プロジェクトの名前（=ディレクトリ名）を指定します。
この名前で新しいディレクトリが作成され、そこにアプリが生成されます。

Would you like to use TypeScript?
TypeScriptを使用するかどうかの選択です。
Yesを選ぶと：.ts / .tsx ファイルが使われる構成になります。型安全な開発が可能になり、Next.js公式も推奨しているので、基本「Yes」で問題ないです。Reactならではの型定義もあって、少し難しいところもあるのですが、慣れるまで共に頑張りましょう！

Would you like to use ESLint?
コード品質チェックツール「ESLint」（イーエスリント）を導入するかどうか。
Yesを選ぶと：開発中のコードスタイルやエラー検出ができるようになります。VS Codeなどのエディタでもリアルタイムでエラー表示してくれるので、すぐにエラーに気づけます。型チェック系は若干うるさいなーと思うこともありますが。原則いれた方がいいです。

Would you like to use Tailwind CSS?
Tailwind CSSを導入するかどうか
Yesを選ぶと：ユーティリティファーストなCSS設計が可能になり、効率よくスタイリングできます。Tailwind CSSもReactを利用したことのある人なら、こうならないかなー？というものが実現された本当にすばらしいものです。食わず嫌いせずにやってみるとすごく簡単で楽にスタリングできるのでオススメです。

Would you like your code inside a src/ directory?
src/ フォルダの中にアプリのコードを配置するかの選択です。
Yesを選ぶと：より構造化されたプロジェクトになります。大規模開発やチーム開発では推奨される構成です。小規模でもYesでいいと思います。

Would you like to use App Router? (recommended)
App Router（Appディレクトリ構成）を使用するかどうか。
Yesを選ぶと：Next.js 13以降で導入された新しいルーティングシステムが使えます。Next.js 15ではこちらが主流であり、必ず「Yes」を選ぶべき。

Would you like to use Turbopack for next dev?
next dev 実行時にTurbopack（高速ビルドツール）を使うかどうか。
Yesを選ぶと：Webpackの代わりにTurbopackを使って開発ビルドが高速になります。ただし、まだベータの機能もあるため、デフォルトは「No」になっています。私も今のところ「No」を選択するようにしています。

Would you like to customize the import alias (@/* by default)?
@/ のようなエイリアス（import時のパス指定）をカスタマイズするかどうか。
Yesを選ぶと：自分の好きなエイリアス名に変更できます。特にこだわりがなければ「No」で問題ないです。

上記のように質問に回答して、最後にSuccess! と表示されたらNext.jsのインストールは完了です。

初期のディレクトリ構成

Next.jsでプロジェクトを作成すると、以下のようなディレクトリ構成になります（src/とApp Router構成を採用した場合）。

text

new-app/
├── node_modules/            # npmパッケージ（通常は触らない）
├── public/                  # 静的ファイル（画像やfaviconなど）
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src/
│   └── app/                 # App Router構成：ページごとのコンポーネント配置
│       ├── favicon.ico      # サイトのファビコン
│       ├── globals.css      # グローバルCSS（Tailwind設定もここに）
│       ├── layout.tsx       # ページ共通レイアウト（ヘッダーやメタなど）
│       └── page.tsx         # トップページ（"/"）のコンポーネント
├── .gitignore               # Gitで除外するファイルの指定
├── eslint.config.mjs        # ESLintの設定（静的コード解析）
├── next-env.d.ts            # TypeScriptの型定義補助（自動生成）
├── next.config.ts           # Next.jsの設定ファイル
├── package.json             # プロジェクトの依存とスクリプト定義
├── package-lock.json        # npm依存のロックファイル（自動生成）
├── postcss.config.mjs       # PostCSSの設定（Tailwindで利用）
├── tsconfig.json            # TypeScriptの設定ファイル
└── README.md                # プロジェクト概要ファイル（初期はテンプレ）

補足

layout.tsx は、App Routerの基本的な考え方である「すべてのページに共通するレイアウト（共通ヘッダーやmetaタグなど）」を定義するファイルです。
page.tsx は、トップページ（/）に表示される内容を定義するファイルです。
globals.css は、Tailwind CSSの@tailwind baseなどの設定がすでに入っており、全体に反映させるスタイルを書く場所です。
public/ にある .svg ファイル群は、Next.jsのテンプレートとしてデフォルトで用意されているアイコン類で、使わないなら削除しても問題ありません。

インストール直後のpackage.json

Next.jsのプロジェクトを作成すると、プロジェクトのルートディレクトリにpackage.jsonというファイルが自動で生成されます。これは、前傾の「初期のディレクトリ構成」でも触れた通り、プロジェクトで使っているライブラリやツール、開発用のスクリプトを定義した設定ファイルです。

今後、色々と作業して、同じ環境で別のプロジェクトを作成したいというときはこのファイルが重要になります。このファイルをプロジェクト直下にコピペして、npm installなどを実行すれば、必要なライブラリやツールをすべてインストールしてくれるのでとても便利です。

実際にnpx create-next-app@latestで作成された直後の内容は、以下のようになっています（私の環境でTypeScriptやTailwind CSS、ESLintなどを選択した場合の例です）。

json

{
  "name": "new-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.3.4",
    "@eslint/eslintrc": "^3"
  }
}

補足

name, version：プロジェクト名やバージョン情報です。
scripts：ターミナルで実行できるコマンドを定義しています。
- npm run dev → 開発サーバ起動
- npm run build → 本番用ビルド
- npm run start → ビルド後のアプリを起動
- npm run lint → ESLintでコードチェック
dependencies：実行時に必要なパッケージ群。Next.js、Reactなど。
devDependencies：開発中だけ使うツール。TypeScriptやESLint、Tailwind CSSなど。

この時点ではまだUIコンポーネント系のライブラリ（たとえばshadcn/ui）は入っていない状態なので、次章でそれを追加していくことになります。

その前に一度npm run devで開発サーバ起動コマンドを実行してみます。

zsh

npm run dev

   ▲ Next.js 15.3.4
   - Local:        http://localhost:3000
   - Network:      http://192.168.XX.XX:3000

 ✓ Starting...
 ✓ Ready in 1743ms
 ○ Compiling / ...
 ✓ Compiled / in 2.3s (757 modules)

上記のように起動コマンドが実行されます。ブラウザで http://localhost:3000にアクセスすると、デフォルトページが表示されます。

「control+c」でnpm run devを中止できます。デフォルトページが確認できたら、一旦、「control+c」で中止して、次に進みます。

3. shadcn/uiをインストール

shadcn/uiとは？

shadcn/ui（シャドシーエヌ・ユーアイ）は、React＋Tailwind CSSベースの比較的新しいUIコンポーネント集（デザインパーツ集のようなもの）で、「必要なものだけを自分のプロジェクトに取り込んで使う」スタイルが特徴です。

一般的なUIライブラリ（たとえばMUIなど）は、最初に全部をnpmで一括インストールし、必要のないコンポーネントまで含まれることも多く、パッケージ自体が重たくなりがちです。

一方、shadcn/uiは以下のような特徴を持っています。

必要なコンポーネントだけをプロジェクトに追加（しかもソースコードごと）
Tailwind CSSベースで拡張性・カスタマイズ性が非常に高い
アクセシビリティに配慮されたUI（Radix UIがベース）
不要なコードを読み込まないため、結果として軽量
デザインも洗練されていて、すぐに実務で使える

開発者目線では、「ブラックボックス化したライブラリではなく、自分で読めて編集できるUI部品を組み込む」感覚に近く、Next.jsやViteといったモダンな環境との相性も抜群です。

Tailwind CSSに慣れている人なら、デザインの自由度とコードの明瞭さに感動するかもしれません。私は1年前くらいまでMUIを利用していましたが、最近はshadcn/uiに完全に乗り換えました。

インストール

shadcn/ui公式のNext.jsへのインストールページに説明がありますが、非常に簡単です。引き続き/xxxx/xxxx/project/new-appにインストールする場合で説明します。

zsh

cd /xxxx/xxxx/project/new-app

# 下記がshadcn/uiのインストールコマンド
npx shadcn@latest init

Need to install the following packages:
shadcn@2.7.0
Ok to proceed? (y) y

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
❯   Neutral
    Gray
    Zinc
    Stone
    Slate
✔ Writing components.json.
✔ Checking registry.
✔ Updating CSS variables in src/app/globals.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

質問に回答するのはWhich color would you like to use as the base color? だけです。ベースカラーのサンプルは**shadcn/ui公式のカラーページ **にあります。別途CSSでも指定できるので初期選択は何でもよいのではないかと思います。

上記のようにSuccess! Project initialization completed.と表示されれば完了です。

shadcn/uiのインストール後の構成変化

npx shadcn@latest init を実行すると、プロジェクト構成にいくつかの変化が加わります。

変更後のディレクトリ構成（抜粋）

text

src/
├── app/
│   ├── favicon.ico
│   ├── globals.css         # CSS変数などが追加されている
│   ├── layout.tsx
│   └── page.tsx
├── lib/
│   └── utils.ts            # ユーティリティ関数（クラス結合など）を定義
.gitignore
components.json             # 使用するshadcn/uiコンポーネントの設定

補足

src/lib/utils.ts は、Tailwind CSSのclass結合のための cn() 関数が定義されたユーティリティです。
components.json は、今後 npx shadcn add button のようにコンポーネントを追加するときに使われる設定ファイルです。
globals.css には、テーマカラーに応じた :root のCSS変数（--background, --foreground など）が追加されます。

shadcn/uiのインストール後のpackage.json

shadcn/uiを初期化すると、依存パッケージとして以下のライブラリが追加されます。

package.jsonの抜粋

json

{
  "dependencies": {
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.525.0",
    "next": "15.3.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.3.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.4",
    "tailwindcss": "^4",
    "tw-animate-css": "^1.3.4",
    "typescript": "^5"
  }
}

補足

class-variance-authority：コンポーネントのバリエーションを管理しやすくするユーティリティ（cva() 関数）。
clsx：条件付きでCSSクラスを結合する軽量ライブラリ（Tailwindと相性◎）。
lucide-react：アイコンライブラリ。shadcn/uiの各種コンポーネントで使われる。
tailwind-merge：Tailwindのクラス競合を解決するツール。たとえば p-2 p-4 のようなクラスが同時に指定された場合、最終的に p-4 だけが残るようにしてくれる。

4. shadcn/uiのコンポーネントの利用

早速、shadcn/uiが用意してくれているコンポーネントを利用してみます。利用方法はshadcn/ui公式のコンポーネントから利用したいものを選んで、そのコンポーネントの説明ページへ飛びます。そうするとインストール方法や利用方法を説明してくれています。

たとえばButtonを利用する場合は、shadcn/ui公式のボタンコンポーネントを参照してください。

最初にPreviewがあってボタンコンポーネントがどんなものかがわかるようになっています。その下にInstallationという項目があって、インストールコマンドが記載されています。CLIとManualの2種類の方法が記載されていますが、CLIの方が簡単です。

下記のようにCLIのコマンドをコピーして実行します。ここでは/xxxx/xxxx/project/new-appというプロジェクトディレクトリにもろもろのインストールを行っていますので、/xxxx/xxxx/project/new-appにいる状態でコマンドを実行します。

zsh

cd /xxxx/xxxx/project/new-app
npx shadcn@latest add button

zsh

✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - src/components/ui/button.tsx

このようにして、ボタンコンポーネントがプロジェクトに追加されます。

shadcn/uiでは、公式ドキュメントを見ながら使いたいコンポーネントを都度インストールしていきます。若干の手間はありますが、その分軽量で構造も明快、しかも「使っているUIが明確に把握できる」という大きなメリットがあります。

このように npx shadcn@latest add の形式で、必要なタイミングで好きなUIパーツを追加していくことができます。ボタン以外にも dialog, dropdown, accordion, toast などが用意されているので、公式ドキュメントを見ながら必要に応じて取り入れていきましょう。

Shadcnのボタンを実際に使ってみる

インストールが完了したら、早速ページ上で Button を使ってみましょう。今回は、初期状態で作成されているトップページ（src/app/page.tsx）にボタンを表示してみます。

src/app/page.tsx を以下のように編集します（デフォルトページを残しておきたい場合はpage.tsxを別名で退避しておいてください）

tsx : page.tsx

// src/app/page.tsx
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-8">
      <h1 className="text-2xl font-bold mb-4">Shadcn/uiボタンの表示テスト</h1>
      <Button className="cursor-pointer font-semibold">クリックしてね</Button>
    </main>
  );
}

補足

@/components/ui/button は、npx shadcn add button によって自動で追加されたコンポーネントです。
Tailwind CSSと組み合わせて className="..." を指定することで、簡単にレイアウトやスタイルを調整できます。

npm run devで確認すると下記のようになります。

Button は、すでに variant や size などのカスタムプロパティをサポートしており、たとえば次のようにバリエーションを指定することもできます：

tsx

<Button variant="outline">アウトラインボタン</Button>
<Button variant="destructive">注意ボタン</Button>
<Button size="sm">小さいボタン</Button>

Shadcnの各コンポーネントにはこのようなバリエーションが最初から用意されており、プロジェクトのデザインに合わせて柔軟にカスタマイズできます。この辺も慣れるまでは、公式サイトを確認しながら進めていくことになります。

5. `layout.tsx`と`globals.css` の編集(ページ共通レイアウト)

ここは、とりあえず、shadcn/uiをさわってみる段階では必要ないです。ただ、基本的な設定については把握しておくべきと思います。
特に日本語フォントを利用する際は必須とも言えるnext/font/googleの扱いです。以前は layout.tsx と tailwind.config.ts で設定していたと思います。
TailwindCSSがv4となってからは tailwind.config.ts がなくなりました。ゼロコンフィグという設計思想によるものです。 globals.css のみを編集するように変わりました。

具体的には、下記のようにします。

`layout.tsx`の設定

src/app/layout.tsxを編集します。GoogleのNoto_Sans_JPを利用する場合の例になります。

tsx : layout.tsx

import type { Metadata } from "next";

// 読み込むフォントを Noto_Sans_JPへ変更
import { Noto_Sans_JP } from "next/font/google";

import "./globals.css";

// Noto_Sans_JPの設定
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">  {/* ←jaへ変更 */}
      {/* const notoSansJPの設定を反映、font-sansはglobals.cssの設定値 */}
      <body className={`${notoSansJP.variable} font-sans antialiased`}>
        {children}
      </body>
    </html>
  );
}

next/fontのメリットについて：

◯ゼロ・レイアウトシフト（CLS）
Webフォントを読み込む際、一時的に標準フォントで表示された後、Webフォントに切り替わる瞬間に文字サイズや行間が変わり、画面全体のレイアウトがガタッとずれる「レイアウトシフト」が発生することがあります。next/fontは、この問題を自動で解決します。ビルド時にフォントの情報を解析し、フォールバックフォントのサイズを調整するCSSを生成するため、Webフォントの読み込み前後でテキストが占めるスペースが変わりません。これにより、ユーザー体験を損なうレイアウトシフトがゼロになります。

◯パフォーマンスの自動最適化

自動セルフホスティング: Google Fontsなどのフォントをビルド時にダウンロードし、自社のサーバーから配信します。これにより、外部サーバーへのリクエストが不要になり、プライバシーが向上し、表示速度も改善されます。
フォントファイルの最適化: 必要な文字だけを含む軽量なフォントファイル（.woff2形式）を自動で生成し、ファイルサイズを削減します。
自動プリロード: 重要なフォントには自動でタグが付与され、ブラウザが早い段階でフォントを読み込むようになり、表示開始が速くなります。

`globals.css`の設定

続けて、globals.cssの設定です。

diff : globals.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

+ @theme {
+  /* Noto Sans JPをフォールバックとして設定 */
+  --font-family-sans: var(--font-noto-sans-jp), sans-serif;
+ }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-   --font-sans: var(--font-geist-sans);
-   --font-mono: var(--font-geist-mono);
・・省略・・
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
+    font-feature-settings: "palt";
  }
}

上記のように、@theme {}ブロックを作成して、そこにフォントの設定を行います。--font-family-sansを設定すると、TailwindCSS v4の.font-sansユーティリティを書き換えることができます。var(--font-noto-sans-jp), sans-serifとしています。sans-serifは万が一フォントが見つからない場合にデバイスフォントを割り当てる指定になります。

@theme inline {}はshadcn/uiがつくるブロックです。デフォルトではNext.jsが指定しているフォント指定を含めて作成してくれるのですが、これは不要なの削除します。

最後に（お好みで）@layer base {}ブロックのbody内に font-feature-settings: "palt"を指定しておきます。これは日本語フォントの文字詰めをやってくれます。

@theme と @theme inline の違い

@theme ブロック（推奨される方法）

目的: Tailwindのコアユーティリティクラス（font-sans, bg-primaryなど）の定義を上書き・拡張するために使います。
動作: ここで--font-family-sansのようなTailwindが予約している変数を定義すると、Tailwindはそれを解釈し、対応するユーティリティクラス（.font-sans）が生成するCSSを自動的に変更します。

@theme inline ブロック

目的: shadcn/uiなどがコンポーネントのスタイルを管理するために使う、特殊なブロックです。
動作: このブロックで定義された変数は、Tailwindのコアユーティリティには直接影響を与えません。代わりに、shadcn/uiのコンポーネントや@layer baseなどで@applyを使って参照される、再利用可能なCSS変数セットを作成するために使われます。

以上が最初にやっておきたい共通レイアウト部分の設定です。

まとめ

この記事では、Next.jsとshadcn/uiの導入から、実際にボタンコンポーネントを表示するところまでを紹介しました。今後も必要なコンポーネントを適宜追加しながら、自分だけのUIを少しずつ育てていきましょう。

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

松本孝太郎

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

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

この記事の更新履歴

2025/7/26
「5. `layout.tsx`と`globals.css` の編集(ページ共通レイアウト)」を追加
2025/7/2
shadcn/uiについての記述を追加
2025/7/1
Next.jsインストール時の質問項目について加筆
2025/6/20
初回公開

▼ 関連記事

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

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

2025/8/8公開

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

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

2025/7/24公開

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

1. （事前準備）nodeのインストール

2. Next.jsをインストール

インストール

初期のディレクトリ構成

インストール直後のpackage.json

3. shadcn/uiをインストール

インストール

shadcn/uiのインストール後の構成変化

shadcn/uiのインストール後のpackage.json

4. shadcn/uiのコンポーネントの利用

Shadcnのボタンを実際に使ってみる

5. layout.tsxとglobals.css の編集(ページ共通レイアウト)

layout.tsxの設定

globals.cssの設定

まとめ

5. `layout.tsx`と`globals.css` の編集(ページ共通レイアウト)

`layout.tsx`の設定

`globals.css`の設定