My App

Next.js 16 + TypeScript + Tailwind CSS + shadcn/ui を使用したモダンな Web アプリケーションテンプレートです。

技術スタック

• Framework: Next.js 16 (App Router)
• Language: TypeScript (tsgo)
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (Radix UI primitives)
• Authentication: Better Auth (Google OAuth)
• Database: Cloudflare D1 (SQLite) + Drizzle ORM
• Storage: Cloudflare R2
• Hosting: Cloudflare Workers (@opennextjs/cloudflare)
• Code Quality: oxlint (linting) + oxfmt (formatting)
• Testing: Vitest + Testing Library
• Package Manager: Bun
• Git Hooks: Lefthook

クイックスタート

git clone <your-repo-url>
cd <your-repo-name>
bun install
cp .env.local.example .env.local
bun run dev

http://localhost:3000 でアクセス。next.config.mjs の initOpenNextCloudflareForDev により、bun run dev でも Cloudflare D1 / R2 バインディングが有効です。

データベース・認証・ストレージのセットアップ手順は docs/DATABASE_SETUP.md を参照。

Scripts

Command	Description
bun run dev	Start dev server
bun run build	Production build
bun run typecheck	Type check with tsgo
bun run lint	Run oxlint
bun run format	Check formatting with oxfmt
bun run format:fix	Format with oxfmt
bun run knip	Detect unused deps/exports/files
bun run test	Run tests with Vitest
bun run cf-typegen	Generate CloudflareEnv from wrangler.toml

Tools

• shadcn/ui — UI components (components.json)
• tsgo — Type checker (@typescript/native-preview)
• oxlint — Linter (.oxlintrc.json)
• oxfmt — Formatter (.oxfmtrc.json)
• lefthook — Git hooks (lefthook.yml)
• knip — Unused deps/exports/files detection (knip.json)
• similarity-ts — Code similarity detector (Rust の cargo install similarity-ts で別途インストール)

プロジェクト構成

src/
├── app/                    # Next.js App Router
│   ├── api/                # API routes (auth, avatars, ...)
│   ├── components/         # ページ横断で共有する UI primitives
│   ├── globals.css         # Tailwind v4 トークン
│   ├── layout.tsx
│   └── page.tsx
├── components/             # shadcn/ui プリミティブ等
│   └── ui/
└── lib/
    ├── auth/               # Better Auth 設定
    ├── drizzle/            # Drizzle ORM スキーマ
    ├── storage/            # R2 ストレージ
    └── utils.ts

各ページの機能別コンポーネントは src/app/<route>/components/<Component>/ にコロケーションします (詳細は .claude/rules/architecture.md)。

AI エージェントで開発する

このリポジトリは Claude Code (および superpowers / aegis MCP) を前提に組まれています。フロー全体・hook 構成・aegis / superpowers の役割分担などは:

• docs/agent-workflow.md — タスクの流れ・常時動いている層・メンテナンスループ・特殊フローの全体像
• AGENTS.md — 常時ロードされるコーディング規約 (@include 経由で .claude/rules/*.md を読み込み)
• docs/adr/README.md — 主要設計判断の長期記録 (なぜ今こう決まっているのか)

普段使う slash コマンドは 3 つだけ:

Command	When
/start-workflow	ticket 粒度の作業を始める時
/commit	コミット境界で
/pr	PR 作成時

trivial な 1 行修正・config 1 値・docs only な変更はこのフローに乗せず直接編集します。

shadcn/ui

bunx shadcn@latest add [component-name]

参考リンク

• Next.js Documentation
• Tailwind CSS
• shadcn/ui
• Better Auth
• Cloudflare D1
• Cloudflare R2
• @opennextjs/cloudflare
• oxc (oxlint/oxfmt)
• Vitest