個人ポートフォリオ兼技術ブログを Next.js で開発 — 手書き → Copilot → Claude Code
自分のキャリアを紹介するポートフォリオ、CV、日英バイリンガルの技術ブログを 一つにまとめた個人サイトを、設計から実装・運用まで一人で作りました。 同時に「最新のWeb技術を実際に触って試す遊び場」としても使っています。 ■ 作ったもの ・ポートフォリオ（経歴タイムライン、CVダウンロード、問い合わせ導線） ・日本語/英語の言語切り替え（React Context + i18n、文言は一箇所に集約） ・MDXベースの技術ブログ（記事ごとに言語を指定し、一覧を自動で出し分け） ・「Ask about Yudi」AIアシスタント — 自分で用意した経歴ファイルだけを 参照して質問に答え、それ以外の話題は丁寧に断るようにガードレールを設定 ・View Transitions API による、記事カードから記事ページへのタイトル遷移演出 ・SEO一式（Metadata API、動的OGP画像、RSS、sitemap、JSON-LD、llms.txt） ・Vercel Analytics / Speed Insights と GTM でCVダウンロード等の計測 ■ 技術スタック Next.js 16 (App Router) / React 19 / TypeScript / Tailwind CSS / Framer Motion / MDX / Vercel AI SDK + Gemini / Vercel ■ 開発の進め方の変化（このプロジェクトのもう一つのテーマ） このサイトは、開発スタイルそのものを更新し続けている場でもあります。 ・最初のバージョン … Next.js を身につけることが目的だったので、あえて すべて手で書きました。App Router、ルーティング、レンダリングの仕組みを ドキュメントを読みながら自分で組み立て、土台の理解を作りました。 ・次の段階 … GitHub Copilot を導入し、定型的なコンポーネントや繰り返しの 実装を任せて、設計や機能そのものを考える時間を増やしました。 ・現在 Claude Code を使い、UIの改善や新機能の追加をより大きな単位で 進めています。AIに任せる範囲と自分がレビュー・判断する範囲を切り分け、 生成されたコードを読んで直せる状態を保つことを意識しています。 手で書いて理解した土台があるからこそ、AIの提案を鵜呑みにせず判断できる、 というのがこのプロジェクトを通して得た一番の学びです。 ■ 工夫した点 AIアシスタントはAPIキーをサーバー側のみで扱い、IP単位のレート制限と 入出力のトークン上限を入れて、無料枠の範囲で安全に公開できる構成にしました。 「自分の情報だけを答えるチャット」という制約を、プロンプト設計と 参照データの切り分けで実現しています。