なぜNext.jsでポートフォリオを作るべきか
エンジニア転職において、ポートフォリオの技術選定も評価対象です。Next.jsはReactベースのフレームワークで、企業での採用実績が高く、転職市場での評価も高いです。またVercelへのデプロイが非常に簡単で、URLをそのまま採用担当者に共有できるのも利点です。
2025年のWeb開発市場でNext.jsを選ぶ理由は明確です。Reactベースであるため既存のReactのエコシステムをそのまま活用でき、App RouterによりサーバーサイドレンダリングとSSG（静的サイト生成）を柔軟に組み合わせられます。Vercel社が開発・メンテナンスしているため、デプロイ環境との相性も完璧です。
- 求人市場での評価：Next.js使用経験を求める求人数は2024年比で約40%増加
- 学習コスト：React既習者なら1〜2週間で基本的なNext.jsアプリを作れる
- デプロイの簡単さ：GitHubと連携するだけで自動デプロイが完了する
- パフォーマンス：SSGにより静的ファイルが生成され、表示速度が非常に速い
プロジェクトのセットアップ
npx create-next-app@latest portfolio --typescript --tailwind --appでプロジェクトを作成します。App Routerを使用することで、最新のNext.jsの機能（Server Components・サーバーサイドレンダリング・静的生成）をフル活用できます。フォルダ構造はapp/ディレクトリ中心に設計します。
セットアップ後に追加インストールすべきライブラリがあります。UIコンポーネントはshadcn/uiを使うことで、デザイン知識が少なくても整ったUIを作成できます。アニメーションにはframer-motion、アイコンにはlucide-reactが人気です。
- shadcn/ui：
npx shadcn-ui@latest initでインストール、再利用可能なUIコンポーネント集 - framer-motion：スムーズなアニメーション実装に最適、スクロールアニメーションが簡単
- next-themes：ダークモード/ライトモードの切り替えを数行で実装
- lucide-react：500以上のアイコンが使えるReact対応アイコンライブラリ
主要ページの実装
トップページ（自己紹介・スキル）、プロジェクト一覧ページ、個別プロジェクト詳細ページ、コンタクトページの4ページが基本構成です。プロジェクトデータはMDXファイルまたはJSONで管理し、generateStaticParamsで静的生成します。お問い合わせフォームはResend APIを使えば無料でメール送信機能を実装できます。
各ページで意識すべきポイントを押さえておきましょう。トップページは採用担当者が最初に見るページのため、3秒以内に「誰が・何ができる・どんな価値があるか」を伝えることが重要です。プロジェクト一覧ページでは技術スタックとデモリンクを必ず表示しましょう。
- トップページ：自己紹介・スキル一覧・主要プロジェクトのハイライトをファーストビューに集約
- プロジェクト一覧：使用技術・デモURL・GitHubリンクをカード形式で表示
- プロジェクト詳細：開発背景・技術選定理由・工夫した点・スクリーンショットを掲載
- コンタクト：メールフォーム（Resend APIで実装）またはSNSリンクを設置
Vercelへのデプロイと公開
GitHubにプッシュした後、vercel.comでリポジトリを連携するだけで自動デプロイが完了します。カスタムドメインの設定も無料で可能です。デプロイ後はlighthouse scoreを確認し、パフォーマンス・アクセシビリティを最適化しましょう。スコアが高いほど技術力のアピールになります。
デプロイ後に必ず確認すべき項目があります。Vercelの分析ダッシュボードでページ速度やアクセス数を確認できます。Lighthouse スコアが90点以上（パフォーマンス・アクセシビリティ・SEO）あれば技術力のアピールになります。
- 自動デプロイの設定：GitHubのmainブランチにプッシュするたびに自動でデプロイ実行
- カスタムドメイン：お名前.comPR
などで取得したドメインを無料でVercelに設定可能 - 環境変数の設定：APIキーなどの秘密情報はVercelの環境変数に設定する
- プレビューデプロイ：プルリクエストごとに自動でプレビューURLが生成され動作確認できる
採用担当者に刺さるポートフォリオの工夫
採用担当者が評価するポートフォリオには共通点があります。「①GitHubのコミット履歴が継続的についている」「②READMEにスクリーンショットと技術スタック一覧がある」「③デモURLが実際に動く」の3点が最低条件です。さらに「開発で苦労した点と解決方法」をREADMEに書くと、技術的な思考力をアピールできます。デザインは完璧でなくてもよいので、まず「完成させる」ことを優先しましょう。
- READMEに必須の項目：スクリーンショット・使用技術・セットアップ方法・デモURL・開発背景
- コミット履歴の重要性：継続的なコミットが「コツコツ取り組む姿勢」を可視化する
- デモURLの品質：スマートフォンでも崩れず表示されること、ロード速度が速いこと
- 差別化ポイント：「なぜそのアプリを作ったか」というストーリーが面接で最も活きる
ポートフォリオをさらに磨くOSS貢献
余裕があればOSS（オープンソースソフトウェア）への貢献もポートフォリオを強化する有効な手段です。バグ修正・ドキュメントの誤字修正・テスト追加など小さな貢献から始められます。GitHubのプロフィールに緑のContributions（草）が増えることで継続的な活動が可視化され、採用担当者への信頼感が増します。初めてのOSSコントリビュートにはGood First Issue labelが付いたIssueを探すのがおすすめです。
OSSコントリビュートを始めるための具体的な手順を紹介します。最初は小さな貢献から始め、徐々に大きな貢献へとステップアップするのが継続のコツです。日本語ドキュメントの翻訳・追加も有効なコントリビュートです。
- STEP1：GitHubで「good first issue」ラベルのついたIssueを検索する
- STEP2：リポジトリをForkしてローカルに clone する
- STEP3：修正・追加を行いプルリクエストを作成する
- STEP4：レビューフィードバックを受けて修正を重ね、マージを目指す
