apps/next - Next.js 認証・管理画面

作成日: 2026-03-06 ／更新日: 2026-06-10

概要

Next.js App Router ベースの Web アプリケーション。ユーザー認証（登録・ログイン・パスワードリセット）、マイページ、プロジェクト管理、管理画面を提供する。エディタ（apps/editor）へのエントリポイントとして機能する。

ディレクトリ構成

apps/next/
├── app/                         # App Router ページ（route group で分割）
│   ├── layout.tsx               # ルートレイアウト
│   ├── page.tsx                 # トップページ
│   ├── (private)/               # 認証必須ルート群
│   │   ├── mypage/              # マイページ
│   │   ├── projects/            # プロジェクト管理
│   │   ├── my-assets/           # マイアセット
│   │   └── admin/               # 管理画面
│   └── (public)/                # 公開ルート群
│       ├── login/               # ログインページ
│       ├── register/            # 登録ページ
│       ├── forgot-password/     # パスワードリセット
│       ├── reset-password/      # パスワードリセット実行
│       ├── works/               # 作品一覧
│       ├── users/               # ユーザープロフィール
│       ├── contact/             # お問い合わせ
│       ├── help/                # ヘルプ（FAQ）
│       ├── docs/                # ドキュメント（codebase / dev-stories / momijiui / technical）
│       ├── devlog/              # 開発日誌
│       ├── play/                # プレイ（埋め込み再生）
│       ├── privacy/             # プライバシーポリシー
│       └── terms/               # 利用規約
├── lib/                         # ユーティリティ・React Context
│   ├── contexts/
│   │   └── AuthContext.tsx       # 認証状態管理
│   ├── api.ts                   # API クライアント
│   └── auth.ts                  # トークン管理
├── components/                  # 共通コンポーネント
│   ├── Header.tsx               # グローバルヘッダー
│   ├── Footer.tsx               # フッター
│   ├── AuthForm.tsx             # 認証フォーム
│   ├── ProjectCard.tsx          # プロジェクトカード
│   └── ...
├── middleware.ts                # Next.js ミドルウェア
├── public/                      # 静的ファイル
├── next.config.js               # Next.js 設定
├── tailwind.config.js           # Tailwind 設定
└── package.json

主要ファイル

ファイル	行数	役割
`app/layout.tsx`	145	ルートレイアウト、AuthProvider ラップ
`lib/contexts/AuthContext.tsx`	129	認証状態管理、トークン検証、自動リフレッシュ
`middleware.ts`	16	ルート保護、未認証時リダイレクト
`lib/api.ts`	1536	API クライアント、認証付き fetch
`app/(private)/admin/page.tsx`	47	管理画面ダッシュボード

依存関係

内部パッケージ

なし（独立）

主要外部ライブラリ

next 15 — フレームワーク
react 19 / react-dom — UI
tailwindcss — CSS
clsx — クラス名ユーティリティ

ページ構成

パス	ページ	認証	説明
`/`	トップページ	不要	サービス紹介、ログインへの導線
`/login`	ログイン	不要	メール + パスワード認証
`/register`	登録	不要	アカウント作成
`/forgot-password`	パスワードリセット要求	不要	リセットメール送信
`/reset-password`	パスワードリセット実行	不要	新パスワード設定
`/mypage`	マイページ	必要	プロジェクト一覧、プロフィール
`/projects`	プロジェクト管理	必要	作成、編集、削除
`/works`	作品一覧	不要	公開作品ギャラリー
`/users/:id`	ユーザープロフィール	不要	公開プロフィール
`/admin`	管理画面	admin	ユーザー管理、アセット管理
`/contact`	お問い合わせ	不要	問い合わせフォーム
`/help`	ヘルプ	不要	よくある質問（FAQ）
`/docs`	ドキュメント	不要	操作説明書・技術解説（codebase / dev-stories / momijiui / technical）
`/privacy`	プライバシーポリシー	不要	静的ページ
`/terms`	利用規約	不要	静的ページ

認証フロー

エディタへの遷移

マイページでプロジェクトカードをクリック
window.location.href で Editor SPA (http://localhost:5176/projects/editor/{projectId}) に遷移
Editor 側で localStorage の authToken を使って API 認証

OAuth フロー (Code Exchange)

Next.js から POST /api/auth/code でワンタイムコード生成
Editor SPA に ?code=xxx パラメータ付きで遷移
Editor が POST /api/auth/exchange-code でトークン取得

ミドルウェア

保護ルート (/mypage, /projects, /admin) への未認証アクセスを /login にリダイレクト
認証済みユーザーの /login, /register アクセスを /mypage にリダイレクト
クッキーまたは Authorization ヘッダーからトークンを取得

管理画面 (/admin)

ダッシュボード（ユーザー数、プロジェクト数、作品数）
ユーザー管理（一覧、ロール変更、停止/復帰）
公式アセット管理（アップロード、カテゴリ、削除）
メッセージ送信（ユーザーへの通知）
システム設定

テスト

apps/next 単体のテストは限定的
主に E2E テスト（tests/auth-flow.spec.ts, tests/auth-redirect.spec.ts）で認証フローを検証
npm run lint で ESLint チェック（CI/CD で実行）

← app-hono-api app-ksc-editor →