tech-debt-audit-nextjslisted

# Next.js 技術的負債調査スキル Next.js（App Router）プロジェクトの技術的負債を調査する。`rules/tech-debt-checklist.md` の各カテゴリをNext.js固有の手順で調査し、フレームワーク固有のチェックも実施する。ファイルパス・行番号・改善案を含む優先度付きレポートを出力する。 ## Steps ### Step 1: プロジェクト検出 1. `next.config.*` の存在と `package.json` の `next` 依存を確認し、Next.jsプロジェクトであることを検証する - Next.jsプロジェクトでない場合 → 「エラー: Next.jsプロジェクトではありません。」と表示して終了 2. `app/` ディレクトリの存在でApp Routerの使用を確認する - `pages/` のみ存在する場合 → 「警告: このプロジェクトはPages Routerを使用しています。このスキルはApp Routerを対象としています。」と表示して終了 3. プロジェクト構造をスキャンしてレイアウトを把握する: - `app/` 配下のルートセグメントを一覧化 - `src/` 使用 vs ルートレベル構成の識別 - `lib/`、`components/`、`hooks/`、`utils/` 等のディレクトリの有無を確認 ### Step 2: 共通チェックリスト調査 `rules/tech-debt-checklist.md` の各カテゴリをNext.jsコンテキストで調査する: #### コードの重複 - コンポーネント間で繰り返されるJSXパターンの検索（類似のフォームレイアウト、カード構造等） - ルートセグメント間で重複するデータ取得ロジックの確認 - `lib/`、`utils/`、`helpers/` ディレクトリ間で重複するユーティリティ関数の検索 #### アーキテクチャとレイヤー分離 - コンポーネント内での直接的なデータベースやORM呼び出しの確認（Server ActionsやAPIルートに配置すべき） - `"use client"` コンポーネントがサーバー専用モジュールをインポートしていないか検証 - `madge` またはインポートチェーンの手動検査による循環インポートの検出 #### エラーハンドリング - `error.tsx` 境界が欠如しているルートセグメントの一覧化 - APIルートハンドラ（`route.ts`）でのtry-catchやエラーレスポンスの欠如を確認 - 空のcatchブロックや握り潰されたエラーの検索 #### 型安全性 - `.ts` および `.tsx` ファイル全体での `any` 型使用の検索 - コンポーネントpropsの型定義欠如の確認（インライン `props: any` や型なしのデストラクチャリング） - 適切な型付けを回避する型アサーション（`as`）の検出 #### デッドコード - TypeScriptやESLintレポートが利用可能な場合、未使用エクスポートの特定 - コメントアウトされたコードブロックの検索 - 未使用インポートの確認 #### 定数と設定 - マジックナンバーやハードコードされた文字列リテラル（URL、APIエンドポイント、閾値）の検索 - `process.env` や `next.config.*` を使用し