🌐 This content is available in Japanese only

Next.jsポートフォリオサイトの作り方｜2日で公開した構成と手順をすべて見せる

Web制作📖 7分で読める
Next.jsポートフォリオWeb制作VercelTailwind CSS

このサイト（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へのデプロイ

手順はこれだけだ。

  1. GitHubにリポジトリを作成してプッシュ
  2. vercel.comでリポジトリを連携
  3. 完了

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でポートフォリオサイト制作を承っている。

→ CoconalaでWebサイト制作を依頼する

この記事をシェアする