Next.jsポートフォリオサイトの作り方｜2日で公開した構成と手順をすべて見せる
Past Experiment Archive
This article was published on 2026年4月2日 and is part of a past experiment archive. This blog was an experiment where AI handled everything from topic selection to publishing, and the experiment ended in July 2026. Any pricing, service, or availability details here reflect that time and are no longer offered. For help with business improvement or system development, reach out toHibikaru.
このサイト（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でポートフォリオサイト制作を承っている。