誰でも同じやり方でトレースできる、AI×Next.js学習テンプレート

ChatGPT と Claude を“ペアメンター”として使い、30〜60分のミニセッション単位で「理解 → 実装 → 検証 → 記録 → 公開」まで完結させる学習プロトコルです。

• 非エンジニアでも 同じ手順・同じプロンプト で学べる再現性の高い学習モデルを提供
• Next.js を中心に、AI 活用＋モダン環境（Vercel, Supabase, GitHub, Obsidian, Qiita）を横断して実践
• 各回 30〜60 分で 成果物＋学習記録＋公開記事 まで到達

• 学習者（Learner）: 進行の主役。プロンプトを打ち、実装・記録・公開を担当。
• コーチ（Coach）: ロードマップ設計、詰まり点の解消、レビュー（PR）を担当。

• フロント: React / Next.js / TypeScript / Tailwind CSS
• バックエンド: Supabase（認証・DB・ストレージ）
• ホスティング: Vercel（プレビュー／本番）
• バージョン管理: GitHub（PR ベース開発）
• AI: ChatGPT（学習設計・成文化）/ Claude Code（理解テスト・要約整形）
• ナレッジ: Obsidian（ローカル知識ベース）
• 公開: Qiita（学習ログ／Tips）

.
├── apps/
│   └── web/                # Next.js アプリ（/app ルータ）
│       ├── app/
│       ├── components/
│       ├── lib/
│       ├── styles/
│       └── tests/
├── docs/                   # 仕様・設計・プロトコル（この README 含む）
├── knowledge/              # Obsidian 同期対象（/knowledge を Vault に）
│   ├── sessions/           # 各回の学習メモ（Markdown）
│   └── prompts/            # 固定プロンプトの.md
├── .github/
│   ├── ISSUE_TEMPLATE/
│   └── workflows/
├── scripts/                # セッション用スクリプト（雛形生成など）
├── .env.example            # Supabase/Vercel 環境変数の雛形
├── package.json
└── README.md

1. リポジトリ作成: 本 README をテンプレとして新規リポジトリに配置
2. 環境変数: .env.local に以下を設定（apps/web 配下推奨）

   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=

3. 依存関係:

   pnpm i    # or npm i / yarn

4. 起動:

   pnpm dev --filter @apps/web

5. デプロイ: Vercel で apps/web をプロジェクトに紐付け

任意: Supabase には profiles テーブルなど最低限のスキーマを用意（/apps/web/lib/db.ts 参照）。

各回 30〜60 分で以下を必ず実施。プロンプトは固定テンプレを使用する。

目的: 今日のテーマを決め、範囲を 30〜60 分に絞る。

固定プロンプト

Next.js を学びたい初心者です。
全体学習ロードマップの中で、次に学ぶべき内容を 30〜60 分で終わる粒度で 1 テーマ提示してください。
これまでに学んだ内容は以下です：
{過去の学習テーマ一覧}
各テーマは「目的」「事前知識」「到達点」「ミニ課題（1〜2個）」を含めてください。

目的: 理論→コード例→ハンズオン手順で素早く全体像を掴む。

固定プロンプト

今日のテーマは「{テーマ名}」です。
初心者向けに、理論説明 → コード例 → 実践課題（1〜2個）の順で学べる教材を作ってください。
60 分以内で完了できる内容にしてください。必要に応じて Next.js の app ルータ前提で解説してください。

目的: 生成教材を手がかりに実装。詰まったら最小質問で解除。

メモ

• 新規ブランチ: feat/session-{番号}-{短いテーマ}
• コミットは最小単位で積む

目的: 学習内容が腹落ちしているかを短問で確認。

固定プロンプト

次の内容をもとに、学んだ内容を理解しているか確認する 3〜5 問の選択問題を作ってください。
最後に答えと簡単な解説も出してください。
---
{今回学習した内容の説明やコード抜粋}

目的: Markdown メモを固定テンプレで作成し、Vault に保存。

固定プロンプト

以下の内容をもとに、学習記録メモを Markdown 形式で作成してください。
見出しは「今日のテーマ」「やったこと」「学んだこと」「理解できていないこと」「次やること」。
必要に応じてコードブロックも整形してください。
---
{コード・ノート・気づき}

保存場所: knowledge/sessions/{YYYY-MM-DD}-{session-番号}-{テーマ}.md

目的: 学習メモを初心者向け記事に整え、Qiita へ公開。

固定プロンプト

次の Markdown を Qiita 記事として整形してください。
初心者向けにやさしいトーンで、タイトルは「【Next.js学習記録】#{回数} {テーマ名}」。
見出し・箇条書き・コードブロックを適切に配置してください。
---
{Phase 5 の Markdown}

• Phase1: 今日のテーマを決定（範囲は 30〜60 分）
• Phase2: 教材生成（理論→コード→課題）
• Phase3: ブランチ切って実装（コミット小さく）
• Phase4: Claude Code で 3〜5 問テスト
• Phase5: Markdown まとめを Obsidian に保存
• Phase6: Qiita 用に整形→下書き→公開
• GitHub: PR 作成→レビュー→マージ→タグ/リリース（任意）

• ブランチ命名: feat/, fix/, chore/
• PR テンプレ（例）:

  ## 概要
  - {今回のテーマ}
  
  ## 変更点
  -
  
  ## 動作確認
  - 手順:
  - スクショ:
  
  ## 学習メモ
  - `knowledge/sessions/{日付-番号-テーマ}.md`

• pnpm gen:session "{テーマ}" : knowledge/sessions/ に雛形ファイルを生成
• pnpm lint / pnpm test : 事前検証

サンプル雛形（/scripts/generate-session.ts）を用意しておくと便利。

• Vault ルートを knowledge/ に設定
• 固定プロンプトは knowledge/prompts/ に保存してコピペ運用
• 「デイリーノート」＋「セッションノート」で紐づけると検索性アップ

• 記事タイトル: 【Next.js学習記録】#<回数> <テーマ名>
• タグ例: Next.js, React, TypeScript, 学習記録, Supabase
• 参考リンクは最少・一次情報を優先（公式 Docs）

以降は「API 連携」「動的ルーティング」「ミドルウェア」「キャッシュ戦略」「テスト」等へ拡張。

1. Issue を立てる（テンプレ使用）
2. feat/* でブランチ作成
3. PR → レビュー（最小 1 名）
4. マージ後にタグ打ち（任意）

MIT（必要に応じて変更）

Next.js を学びたい初心者です。
全体学習ロードマップの中で、次に学ぶべき内容を 30〜60 分で終わる粒度で 1 テーマ提示してください。
これまでに学んだ内容は以下です：
{過去の学習テーマ一覧}
各テーマは「目的」「事前知識」「到達点」「ミニ課題（1〜2個）」を含めてください。

今日のテーマは「{テーマ名}」です。
初心者向けに、理論説明 → コード例 → 実践課題（1〜2個）の順で学べる教材を作ってください。
60 分以内で完了できる内容にしてください。必要に応じて Next.js の app ルータ前提で解説してください。

次の内容をもとに、学んだ内容を理解しているか確認する 3〜5 問の選択問題を作ってください。
最後に答えと簡単な解説も出してください。
---
{今回学習した内容の説明やコード抜粋}

以下の内容をもとに、学習記録メモを Markdown 形式で作成してください。
見出しは「今日のテーマ」「やったこと」「学んだこと」「理解できていないこと」「次やること」。
必要に応じてコードブロックも整形してください。
---
{コード・ノート・気づき}

次の Markdown を Qiita 記事として整形してください。
初心者向けにやさしいトーンで、タイトルは「【Next.js学習記録】#{回数} {テーマ名}」。
見出し・箇条書き・コードブロックを適切に配置してください。
---
{Phase 5 の Markdown}

• この README をプロジェクトの README.md に採用
• knowledge/ を Obsidian Vault に設定
• scripts/ にセッション雛形ジェネレータを追加
• .github/ISSUE_TEMPLATE と PULL_REQUEST_TEMPLATE.md を用意
• Supabase/Vercel を連携して最小 Hello World を本番公開