5週目：フレームワーク入門（Next.jsでポートフォリオ）
ゴール
- Next.js（または同種のフレームワーク）の基本を体験し、複数ページを持つアプリを動かせる
- コンポーネントの考え方を「使える」状態にする（深掘りは後でOK）
- 自分のコードをVercelなどで公開できる
Day1：プロジェクト作成・起動
- Next.jsプロジェクトを作成し、ローカルで起動する
- 到達条件：ブラウザでトップページが表示される
Day2：ページ・ルーティングの基本
- /about や /works など複数ページを追加し、ファイルベースルーティングの仕組みを理解する
- 到達条件：URLを変えると別ページが表示される
Day3：コンポーネントに分割する
- ヘッダーやカードなど繰り返し使う部分をコンポーネント化する
- 到達条件：1つの見た目をコンポーネントとして切り出し、複数ページで再利用できた
Day4：スタイリング
- CSS（またはTailwindなど）でページの見た目を整える
- 到達条件：自分の名前・経歴・作品が読みやすく表示されている
Day5：ナビゲーションを整える
- 各ページ間を移動できるナビゲーションを実装する
- 到達条件：どのページからでも他のページへ移動できる
Day6：初デプロイ
- Vercelなどに公開し、公開URLを発行する
- 到達条件：公開URLにアクセスして動作確認できる
Day7：振り返り・ポートフォリオとしての仕上げ
- 全体を見直し、誤字脱字・崩れたレイアウトを直す
- 到達条件：人に公開URLを送って「これが私のポートフォリオです」と言える状態
進め方（AIの使い方）
- 「Next.jsで /about と /works の2ページを作って、ナビを付けたい。必要ファイルとコードを全部出して」
- 「このエラーの原因候補を3つ。確認順に並べて」
- 「このコンポーネントをpropsで再利用できる形に直して」
よくある詰まりどころと回復手順
- ページが真っ白になる → ブラウザの開発者ツールでエラーを確認し、エラー文をそのままAIに貼る
- スタイルが反映されない → ファイルの読み込み先・クラス名のタイプミスを確認する
- デプロイでビルドエラーになる → エラーログ全文をAIに貼り、ローカルでも同じビルドコマンドを試す
自己チェックリスト
進捗チェック
進捗を記録するには ログイン してください。
成果物
- 複数ページを持つポートフォリオサイト
- 公開URL（Vercelなど）
参考
- Next.js 公式ドキュメント
- Vercel 公式ドキュメント
完成イメージ（ポートフォリオ構成例）
- ページ構成例：トップ（自己紹介）／About（経歴・スキル）／Works（作品一覧）／Contact
- 簡単な指示書：
- トップページに名前・一言キャッチコピー・ナビゲーションを置く
- Aboutページに経歴・学んだことを書く
- Worksページに今までの成果物（このゼミの課題でもOK）をカードで並べる
- Contactページにメールアドレスか、SNSなどの連絡先リンクを置く