next-app-post

Next.js 16 で構築したマイクロブログ型 SNS アプリケーションです。投稿・リアクション・フォロー・DM・通知（Web Push）・サブスクリプション課金（Stripe）といった、現代的なソーシャルアプリに必要な機能をひととおり備えています。

主な機能

• 投稿: テキスト + 画像、公開範囲（public / followers / draft）、編集
• リアクション / リポスト / 引用リポスト / コメント
• ブックマーク / ピン留め投稿
• ソーシャル: フォロー、フォローリクエスト、ブロック、ミュート
• ダイレクトメッセージ
• 通知: アプリ内通知 + Web Push、おやすみモード
• ハッシュタグ / 検索 / おすすめタイムライン
• サブスクリプション: Stripe による Basic / Premium プラン
• 管理機能: 通報、ユーザー停止、NG ワードなどの管理者向け画面（IP 制限対応）
• アカウント設定: プロフィール、通知設定、色覚サポート、タイムライン並び替え、ログイン履歴

技術スタック

カテゴリ	採用ライブラリ
フレームワーク	Next.js 16（App Router, Turbopack）/ React 19 / TypeScript 5
認証	NextAuth v5（Google / GitHub OAuth、メール認証）
データベース	Prisma 6 + PostgreSQL 16（Docker Compose で起動）
画像ストレージ	Cloudflare R2（本番）/ MinIO（ローカル開発、S3 互換）
決済	Stripe（ローカルは stripe-mock を利用）
UI	Tailwind CSS v4 / Radix UI / lucide-react / sonner
フォーム / 検証	React Hook Form / Zod
データ取得	TanStack Query
ログ	Pino
プッシュ通知	web-push（VAPID）
レート制限（任意）	Upstash Redis
テスト	Vitest / Testing Library / jsdom / Playwright（E2E）
コンテナ	Docker（Node.js 22 alpine, multi-stage build）

ディレクトリ構成

src/
├── app/              # App Router（(public) / (protected) / admin / api）
├── components/       # 共通 UI コンポーネント
├── features/         # 機能別モジュール（post / dm / notification / social / subscription など）
├── hooks/            # 共有 React フック
├── lib/              # ユーティリティ・Prisma クライアント・ロガー・config 等
├── middleware.ts     # 認証・IP 制限などのエッジミドルウェア
├── tests/            # Vitest テスト
└── types/            # 共有型定義
prisma/               # Prisma schema・マイグレーション・seed
scripts/              # 運用スクリプト（VAPID 鍵生成、画像アップロード など）
docs/                 # ドキュメント（AI Dev OS ガイドライン / 利用手順）
docker-compose.yml    # PostgreSQL / MinIO / stripe-mock のローカル一式

クイックスタート

# 1. 依存パッケージのインストール（postinstall で prisma generate も実行）
npm install

# 2. 環境変数の準備
cp .env.example .env
# → .env を開いて NEXTAUTH_SECRET などの必須項目を設定

# 3. ローカル DB / MinIO / stripe-mock を起動
docker compose up -d

# 4. マイグレーション適用
npm run db:migrate:dev

# 5. （任意）開発用 SEED 投入
npm run db:seed:dev

# 6. 開発サーバー起動
npm run dev

詳細なセットアップ手順は docs/usages/local-setup.md を参照してください。

よく使うコマンド

コマンド	用途
npm run dev	開発サーバー起動（Turbopack）
npm run dev:webpack	開発サーバー起動（Webpack）
npm run build	本番ビルド
npm start	本番ビルド成果物を起動
npm run type-check	TypeScript 型チェック（tsc --noEmit）
npm run lint	ESLint 実行
npm run format	Prettier で整形
npm run format:check	Prettier フォーマット差分チェック
npm test	Vitest（watch モード）
npm run test:run	Vitest を 1 回実行
npm run test:unit	ユニットテストのみ実行
npm run test:integration	統合テストのみ実行
npm run test:coverage	カバレッジ付きでテスト実行
npm run test:e2e	Playwright で E2E テスト実行
npm run db:migrate:dev	Prisma マイグレーション作成・適用（開発）
npm run db:migrate:deploy	Prisma マイグレーション適用（本番）
npm run db:migrate:status	Prisma マイグレーションの状態確認
npm run db:seed	SEED 投入（SEED_MODE で dev / prod 切替）
npm run db:seed:dev	開発用テストデータ投入
npm run db:seed:prod	本番用マスタデータ投入
npm run prisma:studio	Prisma Studio 起動（http://localhost:5555）
npm run upload:static	静的画像を画像ストレージにアップロード

Docker

アプリ単体のイメージをビルド・実行する場合:

docker build -t next-app-post .
docker run --rm -p 3000:3000 --env-file .env next-app-post

ヘルスチェックは /api/health で行われます。

ローカル開発で使う PostgreSQL / MinIO / stripe-mock は docker-compose.yml にまとめて定義されており、docker compose up -d で一括起動できます。ホスト側ポート割り当て:

サービス	ポート	用途
PostgreSQL	54335	アプリの永続化先
MinIO	9000（API） / 9001（Web コンソール）	画像ストレージ（S3 互換）
stripe-mock	12111	Stripe API のローカルモック

ドキュメント

• docs/usages/local-setup.md — ローカル環境構築手順
• docs/ai-dev-os/ — 開発ガイドライン（AI Dev OS）

ライセンス

MIT License