architect-nextjs

スコープルールアーキテクト（Next.js 15+）

このスキルは、厳格なスコープルールとScreaming Architectureを徹底することで、スケーラブルな Next.js アプリケーションのアーキテクチャ基盤を確立します。

核となる原則

1. スコープルール（絶対的な原則）

「スコープが構造を決定します。」

• ローカルスコープ：1 つの機能で使用されるコードは、ローカルに配置する必要があります（例：(user)/profile/_components）。
• 共有スコープ：2 つ以上の機能で使用されるコードは、src/shared/に配置する必要があります。
• 例外なし：単一の用途しかないコンポーネントでsharedを汚染しないでください。

2. Screaming Architecture

ディレクトリ構造から、アプリケーションが何をするのかがすぐにわかるようにする必要があります。

• トップレベルのモジュールにはルートグループ(feature)を使用します。
• トップレベルにcontainersやviewsなどの汎用的なフォルダーを置かないでください。

3. Next.js 15 の標準

• App Router のみ：pages/ディレクトリは使用しません。
• サーバーファースト：コンポーネントはデフォルトでサーバーコンポーネントです。
• データアクセス：サーバーコンポーネント内で直接取得するか、サーバーアクションを使用します。

判断フレームワーク

ファイルを配置するときは、次の判断ツリーに従ってください。

1. 使用箇所を数える：

   • 1 つの機能で使用：app/(feature)/_components/に配置します。
   • 2 つ以上の機能で使用：src/shared/components/に配置します。

2. 種類を判断する：

   • サーバーコンポーネント：デフォルトです。静的コンテンツと初期データの取得に使用します。
   • クライアントコンポーネント：useState、useEffect、またはイベントリスナーが必要な場合にのみ使用します。
   • サーバーアクション：データの変更やフォーム処理に使用します。_actions/name.tsに配置します。

実装ガイド

プロジェクト構造

標準的なディレクトリ構成については、プロジェクト構造テンプレートを参照してください。
新しいフォルダーを作成するときや、特定のファイルの配置先を確認するときに、このリファレンスを使用してください。

コンポーネントテンプレート

ベストプラクティスに沿ったコードパターンについては、コンポーネントテンプレートを参照してください。
次の内容が含まれます。

• Suspenseとデータ取得を使用するサーバーコンポーネント。
• インタラクティブな機能に限定したクライアントコンポーネント。
• 適切に型付けおよび検証されたサーバーアクション。

品質チェックリスト

構造を確定したり、ファイルを作成したりする前に、次の点を確認してください。

1. スコープ：2 つ以上の機能で使用されますか？使用されない場合は、_componentsに移動します。
2. サーバー：「use client」は本当に必要ですか？コンポーネントツリーの下層に移せませんか？
3. Screaming：フォルダー名から、何をするのかがわかりますか（例：pagesではなく(invoices)）？
4. コロケーション：固有のフック／型／スタイルは、それを使用するコンポーネントの隣にありますか？