Next.js テンプレートプロジェクト

Next.js をベースにした Web アプリケーション開発用のテンプレートプロジェクトです。

技術スタック

カテゴリ	技術
フレームワーク	Next.js 16.1.6 (App Router)
UI ライブラリ	React 19.2.3
言語	TypeScript 5
スタイリング	Tailwind CSS v4
UI コンポーネント	shadcn/ui (new-york スタイル)
アイコン	Lucide React
プリミティブ	Radix UI
フォント	Geist (Sans / Mono)
リンター	ESLint 9
フォーマッター	Prettier

ディレクトリ構成

src/
├── app/            # App Router のページ・レイアウト
│   ├── layout.tsx  # ルートレイアウト
│   ├── page.tsx    # トップページ
│   └── globals.css # グローバルスタイル
├── components/     # コンポーネント
│   └── ui/         # shadcn/ui コンポーネント
├── hooks/          # カスタムフック
└── lib/            # ユーティリティ関数
    └── utils.ts    # cn() などの汎用ヘルパー

セットアップ

# 依存パッケージのインストール
npm install

# 開発サーバーの起動
npm run dev

ブラウザで http://localhost:3000 を開くと確認できます。

スクリプト一覧

コマンド	説明
npm run dev	開発サーバーを起動
npm run build	プロダクションビルドを作成
npm run start	ビルド済みアプリを起動
npm run lint	ESLint によるコード検査
npm run format	Prettier でコードをフォーマット
npm run format:check	フォーマットの差分チェック

shadcn/ui コンポーネントの追加

npx shadcn add <component>

例:

npx shadcn add button
npx shadcn add dialog

追加されたコンポーネントは src/components/ui/ に配置されます。

パスエイリアス

tsconfig.json で @/* が ./src/* にマッピングされています。

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";