Instruction file imported from SAMEO-jp/PMEDATAHUB (.cursor/rules/02_page.tsx_/1.1.tsx-section-name.mdc). Copyright stays with the author.

description: "Next.js プロジェクトにおける page.tsx の構造・分割ルール" globs:

• "src/app/**/*.tsx" alwaysApply: false

叫ぶ層

• 読み込んだら「!!!1.1.tsx-name.mdc!!!」と叫ぶ

Next.js page.tsx 構造化ルール

概要

Next.js プロジェクトにおける page.tsx ファイルの統一された構造化ルールです。 コードの可読性と保守性を向上させるため、明確なセクション分けを行いコーディングを行います。

1. 🔖 コードセクションの構造化ルール（必須）

1-1. 統一されたセクション構造

以下の順序でセクションごとに明示的なコメントを入れてセクション構造を記述すること。 そのコンポーネントにその層が不要な場合は、書かないこと。 仮にこのコメントを書いた場合は、その層のコメントを削除すること。

セクション区切りコメントのルール

• 以下のフォーマットでセクション区切りコメントを作成する：

  //==========================================
  // ＜層／用途＞：＜このセクションの役割＞  
  /==========================================
  // ここから実際の処理コード…
  

// ==========================================
// インポート層
// ==========================================

// ==========================================
// 型定義層（Props, 内部型, API型）
// ==========================================

// ==========================================
// パラメータとルーティング層（searchParams, params, useParams, useRouter, useSearchParams）
// ==========================================

// ==========================================
// 状態管理層（useState, useReducer, Zustand）
// ==========================================

// ==========================================
// データ取得層（Server Components: async/await, Client Components: useEffect, use hooks）
// ==========================================

// ==========================================
// ビジネスロジック層（データ加工・計算・検証）
// ==========================================

// ==========================================
// 検証・バリデーション層（入力値チェック、データ整合性）
// ==========================================

// ==========================================
// 変換・フォーマット層（データ変換、表示用フォーマット）
// ==========================================

// ==========================================
// エラーハンドリング層（エラー処理、フォールバック）
// ==========================================

// ==========================================
// 副作用層（useMemo, useCallback）
// ==========================================

// ==========================================
// イベントハンドラ層（onClick, onSubmit, onChange）
// ==========================================

// ==========================================
// レンダリング層（JSX return）
// ==========================================

2. 📋 セクション詳細説明

インポート層

• React、Next.js、外部ライブラリのインポート
• 内部コンポーネントやユーティリティのインポート
• 型定義のインポート

型定義層

• Props、内部型、API型の定義
• インターフェース、型エイリアスの定義
• API レスポンス型

パラメータとルーティング層

• Next.js のルーティング関連フック
• URL パラメータの取得
• クエリパラメータの処理

状態管理層

• useState、useReducer による状態管理
• Zustand などの外部状態管理ライブラリ
• コンポーネント固有の状態

データ取得層

• Server Components: async/await によるデータ取得
• Client Components: useEffect、カスタムフック
• API 呼び出しとデータフェッチング

ビジネスロジック層

• データの加工・計算
• ビジネスルールの実装
• データの検証・変換

検証・バリデーション層

• 入力値の検証
• データ整合性のチェック
• エラー条件の判定

変換・フォーマット層

• データの表示用変換
• 日付、数値のフォーマット
• 国際化対応

エラーハンドリング層

• try-catch ブロック
• エラー状態の管理
• フォールバックUI

副作用層

• パフォーマンス最適化

イベントハンドラ層

• ユーザーインタラクション処理
• フォーム送信処理
• 状態更新処理

レンダリング層

• JSX の return 文
• 条件付きレンダリング
• 最終的なUI構造

3. 🔗 関連ルール

各層の詳細な説明については、 .cursor\rules\1.2.tsx codeselection.mdc を参照してください： @file 1.2.tsx codeselection.mdc

4. ✅ 品質チェックリスト

• 各セクションが適切な順序で配置されている

• 不要なセクションは削除されている

• コメントが明確で分かりやすい

• コードの責任分離が適切に行われている

• パフォーマンスを考慮した実装になっている