PractiX Code Lab

【概要】NEXT.jsでポートフォリオを１から作成してみた

Share this post

🚪はじめに

管理人のTKGです。 今回はNEXT.jsを使ってポートフォリオを作成したので、その際の学びやTipsを紹介したいと思います。 本記事では制作背景やおおまかな流れについて紹介します。

より詳細な内容については今後投稿予定の詳細記事にてご確認ください。

🎯想定読者

  • Next.jsでポートフォリオを作りたい方。
  • ポートフォリオ作成までの手順を知りたい方。

📘本記事でわかること

  • Next.jsでポートフォリオを構築した全体の流れ
  • どのような技術スタックで作成したのか

🧭作成背景

  • スキル棚卸しと可視化
    • エンジニアとして技術を証明するものがなく、 現在の自分ができること・やりたいことを詰め込んだプロダクトのリリース経験を積むため。
  • AIを活用した開発の実用性と制約の検証
    • AIを活用する際の指示（プロンプト）のコツやエラーに対する提供すべき情報などの把握するため。 また、AIと対話しながら、不明瞭な箇所の解像度を上げていく手法を探るため。
  • フルスタック開発への挑戦
    • フロントエンド開発の経験はあったが、バックエンドでの開発経験がなく、webページが表示される仕組みの全体像の理解が浅かったため、webページ（サービス）が動作する仕組みを理解するため。

🧱 使用技術スタック

🧑‍💻 言語・開発環境

  • 言語：TypeScript
  • フレームワーク：React（v19） + Next.js（v15.1.2）
  • スタイル：Tailwind CSS（v3.4.1）
  • 型定義：@types/react など

🎨 UI・アニメーションライブラリ

  • Framer Motion（v12.0.5）
    • ページ遷移やモーダルなどのスムースなアニメーション
  • GSAP（v3.12.5）
    • より高度なタイムライン制御付きアニメーション
  • three.js（v0.172.0）
    • 3Dグラフィック描画
  • @react-three/fiber / drei
    • React上でthree.jsを扱いやすくするラッパー
  • postprocessing
    • bloom等のエフェクト処理
  • react-icons
    • 各種アイコン用

🛠 補助・開発関連

  • TypeScript（v5）
  • PostCSS：Tailwindのスタイル構築に使用
  • globals： グローバル変数のポリフィル／型拡張用

🚀 ホスティング・デプロイ

  • Vercel：CI/CD・高速ホスティング（Next.js公式推奨）

🎨 UIデザイン

  • Figma：UIワイヤーフレーム／構成の検討に使用

🎯選定理由（抜粋）

Next.js

  • フロントエンド開発でよく利用されている言語であったため 参考サイト
  • 公式チュートリアルを実施した経験があり、簡単な動作は理解していたため

Tailwind CSS

  • よく利用しており慣れていたため

Framer Motion / GSAP / three.js

  • 2D・3Dのアニメーションを実装したいと考えており、 その中でも人気のあるライブラリを使ってみたいと考えていたため。

📝ポートフォリオ完成までの実施ログ

  • 要件整理：Must / Nice to have の整理
    • ポートフォリオサイトとして最低限必要な機能（自己紹介、制作物一覧など）と、加えたい表現（3D演出、アニメーションなど）を整理。
  • コンセプト設計＆UI構成案の策定
    • サイト全体の印象や「どんな体験を与えるか」を定義し、他のポートフォリオサイトも参考にしながら、構成要素を洗い出した。
  • アウトラインベースの実装（ページ構成のスケルトン作成）
    • トップページ・WORKページ・ABOUTページなど、ページ単位で構成とルーティングだけをまず実装し、全体の動線とボリューム感を先に確認。
  • 要件再検討・仕様変更
    • 実際に画面を操作しながら、当初見えていなかった仕様や構成上の課題を洗い出し、細部の設計に落とし込んだ。
  • 各ページの詳細実装・UI調整
    • コンポーネント単位で詳細なレイアウトやアニメーションを実装。技術的な試行錯誤や調整もこのタイミングで実施。
  • デプロイ・動作確認（Vercel）
    • 公開環境での動作確認・微調整・パフォーマンス確認などを行い、初期バージョンとして公開。

🧩詰まりポイント（抜粋）

  • 描画方式（SSR/SSG/CSR）の使い分け
    • JavaScriptが反映されない問題や、画面推移のラグ問題
  • Next.jsの構造的なルール
    • 初回表示時のレンダリング制御とcookie判定でCSR限定になったのが課題。

🗂投稿予定記事

  1. 各工程での実施事項、その時考えていたこと
  2. three.jsを使った3D表現
  3. Framer Motion / GSAPを使った2D表現

📦成果物

Share this post