Next.jsポートフォリオサイトの作り方｜2日で公開した構成と手順をすべて見せる
このサイト（show-smartwork.dev）はNext.js 15で動いている。App Router、Tailwind CSS v4、Vercelデプロイ。ゼロから公開まで2日かかっていない。
「ポートフォリオサイトをNext.jsで作ってみたい」「WordPressから乗り換えたい」と考えている人に向けて、実際に動いているサイトの構成をそのまま書く。コードも見せるし、ハマったポイントも隠さない。
Next.jsを選んだ3つの理由
WordPressやSTUDIO、Wixでもポートフォリオは作れる。それでもNext.jsにしたのは明確な理由がある。
表示速度とSEOが最初から両立する。 静的生成（SSG）でページを事前ビルドするため、Core Web Vitalsのスコアが高い。このサイトはPageSpeed Insightsでモバイル90点台を安定して出している。WordPressだとプラグインの組み合わせで苦労する部分が、Next.jsではフレームワーク側で解決済みだ。
GitHubリポジトリがそのままスキル証明になる。 Next.js・React・TypeScriptを使えることが、コードを見れば一目でわかる。WixやSTUDIOで作ったサイトにはこの要素がない。エンジニアとしてのポートフォリオなら、この差は大きい。
Vercelとの相性が抜群にいい。 Next.jsの開発元が運営するホスティングだから、デプロイはgit push一発。プレビュー環境も自動で立ち上がる。無料プランで本番運用でき、月額コストはドメイン代（年1,500円程度）だけで済む。
技術スタックの全体像
Next.js 15 (App Router)
React 19
TypeScript
Tailwind CSS v4
Vercel（デプロイ・ホスティング）
TypeScriptは最初は面倒に見えるが、IDEの補完が効くので結果的に開発速度が上がる。propsの型を定義しておくとコンポーネント間のデータ受け渡しでバグが激減するし、半年後に自分のコードを読み返すときにも助かる。
ページ構成の設計
ポートフォリオに必要なページは意外と少ない。最小構成ならこの3つで十分だ。
/— ホーム（自己紹介・スキル・実績のサマリー）/projects/[id]— 案件詳細（動的ルートで自動生成）/contact— 問い合わせフォームまたはSNSリンク
このサイトでは /blog（55記事）、/lp-gallery（LP6種のショーケース）、/ai-log（AI運営ログ）も追加しているが、これらは後から足したもの。最初は3ページで公開して、必要になったら増やせばいい。
App Routerのディレクトリ構成
src/
app/
layout.tsx ← フォント・メタデータ・共通レイアウト
page.tsx ← ホームページ
template.tsx ← ページ遷移アニメーション
projects/
[id]/
page.tsx ← 案件詳細（generateStaticParamsで静的生成）
blog/
page.tsx ← 記事一覧
[slug]/
page.tsx ← 記事詳細
components/ ← 再利用するUIパーツ
lib/
data.ts ← プロジェクトデータ（TypeScriptで直書き）
ポイントは、データをDBもCMSも使わずTypeScriptファイルに直書きしている点。更新頻度が低いポートフォリオなら、これで十分。インフラコストがゼロになるし、バックアップもGitで完結する。CMSを挟むと「CMSが落ちたらサイトも止まる」リスクが出るが、静的生成ならビルド済みのHTMLが配信されるだけなので、そのリスクもない。
Vercelへのデプロイ
手順はこれだけだ。
- GitHubにリポジトリを作成してプッシュ
- vercel.comでリポジトリを連携
- 完了
mainブランチへのプッシュで自動デプロイが走る。PRを作れば自動でプレビューURLが発行されるので、本番に影響させずに確認できる。カスタムドメインも無料で設定可能。自分は設定から公開まで10分かからなかった。
実際にかかった時間
| 工程 | 所要時間 |
|---|---|
| 環境構築〜Hello World | 30分 |
| ホームページ完成 | 半日 |
| 全ページ + デプロイ | 2日 |
React経験があれば、もっと速いかもしれない。逆にReactが初めてなら3〜5日を見ておくと安心。ただし「完璧に作ってから公開」は勧めない。粗くても公開されているポートフォリオのほうが、ローカルで眠っている完璧なサイトより100倍価値がある。
半年運用して感じたこと
Next.js + Vercelの組み合わせは「速い・安い・コードが残る」の三拍子が揃っている。月額コストはドメイン代だけ。ビルドもデプロイも自動化できる。エンジニアのポートフォリオとしては、今一番コスパが良い選択肢だと思う。
デメリットはReactとTypeScriptの基礎知識が必要なこと。完全な初心者だと学習に1〜2週間はかかる。ただ「自分で作るか外注するか」で迷っているなら、個人事業主のホームページ、自作 vs 外注どっちが得？で判断材料をまとめた。
WordPressからの移行を考えている場合はWordPressからNext.jsに移行して表示速度3倍になった話が参考になる。完成したポートフォリオのSEO対策はポートフォリオサイトのSEO対策、AIにやらせてみたに書いた。
「作り方はわかったけど自分でやる時間がない」という場合は、Coconalaでポートフォリオサイト制作を承っている。