Next.js×Storybookで作る！プロ級ポートフォリオ開発ガイド

「自分だけのポートフォリオを作りたいが、どうせなら現場で使われるモダンな技術スタックを習得したい」と考えていませんか？本記事では、Next.js、Storybook、Three.jsを組み合わせた、高品質なポートフォリオサイトの構築手法について解説します。

Next.jsとStorybook、そしてThree.jsを組み合わせることで、最先端の技術を習得しながら、見た目にも機能的にも優れたポートフォリオを構築できますよ。

ただ作るだけでなく、未来のキャリアにつながるスキルを身につけられるってことですね！どんなポートフォリオができるか、今から楽しみです！

紹介するポートフォリオ

概要と技術的背景

現代のフロントエンド開発において、単にページを作るだけでなく「コンポーネント単位での管理」と「自動テスト」の導入は欠かせません。本プロジェクトでは、ReactベースのフレームワークであるNext.js (App Router)を採用し、UIコンポーネントのカタログ化ツールであるStorybookを導入することで、開発効率と保守性を高めています。

また、Three.jsによる3Dグラフィックスや、Stripeによる決済機能の統合、TailwindCSSを用いたスタイリングなど、実務レベルのライブラリ構成となっています。

Next.jsのApp Routerでルーティングを扱い、Storybookでコンポーネントを独立して開発・確認することで、開発効率と品質を同時に高めています。まるで小さな部品を組み合わせて、大きな製品を作るような感覚ですね。

一つ一つのパーツがきちんと動くか確認しながら作れるから、全体の完成度が高くなるんですね！3Dや決済機能まで盛り込めるとは、プロ級のポートフォリオができそうです。

本ガイドが対象とする方

Next.js を利用したモダンなフロントエンド開発に興味がある方
Storybook を活用したコンポーネント駆動開発（CDD）を実践したい方
Vitest や Playwright を用いたテスト構成を参考にしたい方
Docker環境での一貫した開発フローを構築したい方

詳細解説：インフラとワークフロー

この構成の最大の特徴は、Dockerによる開発環境の共通化と、Makefileによるコマンドの抽象化です。さらに、GitHubへのPushをトリガーにCircleCIが作動し、Vercelへ自動ホスティングされるCI/CDパイプラインが構築されています。

Dockerを使えば、OSや環境に依存せず、誰でも同じ開発環境をすぐに構築できます。CI/CDパイプラインがあれば、コードをPushするだけで自動でテストやデプロイが行われるので、手作業によるミスを防ぎ、開発者は実装に集中できます。

つまり、チーム開発でも、個人開発でも、環境構築や公開作業で悩む時間が減るってことですね！手間なく最新のプロジェクトを公開できるのは嬉しいです。

技術スタック一覧

Frontend: Next.js, React, TypeScript, Three.js, TailwindCSS, Sass, Axios, Formik, Yup
Testing: Vitest, Playwright
Lint/Check: ESLint, Prettier
Infrastructure: Docker / Docker Compose, CircleCI, Vercel

実装・利用例

プロジェクトのセットアップと管理には、以下の自動化コマンドを利用します。

1. 環境構築

リポジトリをクローンし、Dockerコンテナを起動して必要な依存ライブラリを一括インストールします。

# リポジトリのクローン
git clone git@github.com:isystk/profile.isystk.com.git
cd profile.isystk.com

# Dockerコンテナの起動とライブラリのインストール
make setup

2. 開発サーバーとツールの起動

プロジェクトの管理には Makefile を利用し、複雑なコマンドを簡略化しています。

コマンド	内容
`make dev`	ローカル開発サーバー（Next.js）の起動
`make storybook`	Storybookの起動（UIコンポーネント確認）
`make test`	Vitestによるユニットテストの実行
`make lint`	ESLintによる構文チェック
`make build`	プロダクション用ビルドの実行
`make up / down`	コンテナの起動 / 停止