Next.js App Router + Firebase でフルスタック開発！クリエイターの「価値証明」を手助けするポートフォリオサービス
1. はじめに：なぜポートフォリオ作成は面倒なのか？
皆さん、こんにちは。
突然ですが、ポートフォリオサイト、作るの面倒じゃないですか？
いざ作ろうと思っても、どんなデザインにすれば良いか分からない…
Next.js? Astro? それともSTUDIO? 技術選定だけで時間が過ぎていく…
そもそも、まだ載せられるような実績がない…
僕自身、副業やフリーランスとしての活動を始める中で、こうした「最初の壁」に何度もぶつかってきました。
そんな悩みを 「圧倒的な手軽さ」 で解決し、すべてのクリエイターが自信を持って自身の価値を証明できる場所を提供したい。その想いから、個人開発でポートフォリオ作成サービス 「foliotree」 を開発し、この度正式にリリースしました！
▼ 完成したサービスはこちらです！
この記事では、foliotreeがどんなサービスなのか、なぜ作ったのか、そしてNext.js App RouterとFirebaseというモダンな技術スタックで、どのようにしてこのサービスをゼロから作り上げたのか、その全てをお話ししたいと思います。
2. なぜ作ったのか？ - 開発の動機とfoliotreeのビジョン
foliotreeの開発の原点は、僕自身の体験にあります。
副業を始めたての頃、活動資金も潤沢ではなく、ポートフォリオサイトを作るのにとても苦労しました。「有料ツールは高いし、かといって自作する時間もスキルもまだ足りない…。お金をかけずに、でもプロとして通用する自己紹介サイトが、もっと手軽に作れたらな…」と、常々感じていました。
世の中にはForiioのような素晴らしい高機能ポートフォリオサービスも存在します。しかし、多機能であるがゆえに、駆け出しのクリエイターにとっては少し敷居が高いと感じる部分もありました。
だからこそfoliotreeでは、「シンプルさ」と「手軽さ」にとことんこだわりました。Linktreeのように直感的で、誰でも数分で、ビジネスの場でも自信を持って提示できるポートフォリオが完成する。それがfoliotreeが提供する最初の価値です。
そして、僕が目指しているのは、単なるポートフォリオ作成ツールではありません。
将来的には、実績作りのためのチームアップの場を提供したり、企業との出会いを創出したりすることで、クリエイターの「0→1」からその先のキャリアまでを一気通貫で支援する、そんな温かいキャリア支援プラットフォームに育てていきたいと思っています。
3. 何ができるのか？ - foliotreeの主要機能紹介
foliotreeのコンセプトは「圧倒的な手軽さ」。その言葉通り、ユーザーが迷わず、ストレスなくポートフォリオを作成できる機能を詰め込みました。
① 簡単・安心のアカウント登録
まずは、メールアドレスまたはGoogleアカウントで簡単にサインアップ。
メール/パスワードで登録した場合は、メール認証を導入しているので、安心してご利用いただけます。
② 直感的なプロフィール作成
プロフィール編集画面では、あなたの個性と専門性を最大限に引き出すための工夫を凝らしました。
職業/肩書き: 候補リストから選ぶことも、自由に入力することもできます。
リアルタイム更新: プロフィール画像を更新すると、ヘッダーのアバターも即座に新しいものに変わります。
SNS/リンク: X, Instagram, GitHubに加え、ブログなどのURLも複数登録可能です。
③ "手軽さ"を追求した作品登録
ポートフォリオの主役である作品の登録は、どこまでもスムーズに行えます。
ドラッグ＆ドロップ: カバー画像や詳細画像は、ドラッグ＆ドロップで直感的にアップロードできます。
画像クリッピング: もう外部ツールは必要ありません。アップロード時に、最適な形に画像をトリミングできます。
多様なメディア: 画像だけでなく、YouTube動画のURLを貼るだけで、動画を埋め込むことも可能です。
④ そして、美しいポートフォリオを即時公開
全ての情報を入力したら、あとは公開設定をONにするだけ。
PC、タブレット、スマホ、どのデバイスで見ても美しく表示される、あなただけのポートフォリオサイトが完成します。
百聞は一見に如かず。まずはこちらのサンプルをご覧ください！
▼ Webエンジニアの作例
▼ UI/UXデザイナーの作例
4. どうやって作ったのか？ - 技術スタックとこだわりの実装
この記事を読んでくださっている方の中には、「で、それってどうやって作ってるの？」と気になっている方も多いかと思います。
ここからは、foliotreeを支える技術スタックと、特にこだわった実装について少しだけお話しします。
利用技術スタック
foliotreeは、以下のモダンな技術スタックで構築されています。個人開発でフルスタックアプリケーションを高速に立ち上げるための、現時点での最適解の一つだと考えています。
フレームワーク: Next.js (App Router)
言語: TypeScript
UI: Tailwind CSS, shadcn/ui, Framer Motion
バックエンド (BaaS): Firebase (Authentication, Firestore, Storage)
Cloud Functions: Firebase (for Firebase) - ユーザー名変更時のデータ同期など
フォーム管理: React Hook Form, Zod
ホスティング: Firebase App Hosting
エラー監視: Sentry
こだわりの実装：サーバー/クライアントの境界との戦い
Next.js App Routerを採用したことがある方なら、サーバーコンポーネントとクライアントコンポーネントの使い分けに一度は頭を悩ませたことがあるのではないでしょうか。僕も例外ではありませんでした。
例えば、「お知らせ」機能の実装。
当初は、SEOも考慮してTOPページやお知らせ一覧をサーバーコンポーネントで実装し、firebase-adminを使ってサーバーサイドでデータを取得しようとしました。しかし、app/layout.tsx がクライアントコンポーネントである AuthProvider を必要とすることから、"use client"の境界が非常に複雑になり、ビルドエラーに何度も直面しました。
最終的には、「認証状態の管理はクライアントに徹底的に寄せ、データ取得はカスタムフック (useAnnouncements) で行う」 という、シンプルで堅牢なクライアントサイドアプローチに切り替えました。
App Routerの最新機能を追いかけるのも魅力的ですが、サービスの安定性と開発速度を優先するという、個人開発ならではの現実的な判断も重要だと改めて感じました。
こだわりの実装：AuthContextによるグローバルな状態管理
ログイン直後に画面がちらついたり、リダイレクトループに陥ったりする問題にも直面しました。
原因は、currentUser (認証状態) と firestoreUser (DBのユーザー情報) の取得タイミングがバラバラだったことです。
この問題を解決するために、AuthContext をリファクタリングし、loading, currentUser, firestoreUser, isEmailVerified といった認証に関する全ての状態を一元管理するようにしました。
onAuthStateChanged の中で、firestoreUser の取得まで await してから loading を false にすることで、「loading: false ならば、全ての認証情報は確定している」 という状態を保証し、アプリケーション全体を非常に安定させることができました。
5. 今後の展望と、皆さんへのお願い
foliotreeは、まだ生まれたばかりのサービスです。
今回のリリースは、壮大なビジョンに向けた、まだほんの第一歩にすぎません。
今後は、
クリエイター検索機能: スキルやタグで、他の素晴らしいクリエイターを見つけられる機能。
企業向けスカウト機能: あなたの才能を求めている企業から、直接スカウトが届く機能。
デザインテンプレートの拡充: さらに多様なデザインで、あなたの個性を表現できる機能。
などを実装し、クリエイターの皆様のキャリアをより力強くサポートできるプラットフォームへと進化させていく予定です。
そこで、皆さんにお願いがあります。
foliotreeは、ユーザーであるクリエイターの皆さんと一緒に育てていくサービスでありたいと思っています。
ぜひ一度サービスを触ってみて、どんな小さなことでも構いませんので、感想や「もっとこうだったら嬉しい」といった改善点を教えていただけないでしょうか。
あなたのフィードバックが、foliotreeをより良いサービスへと成長させる、最高のエネルギーになります。
6. おわりに
最後まで読んでいただき、本当にありがとうございました。
個人開発は、時に孤独で、困難な道のりです。
しかし、自分が信じる価値を形にし、それが誰かの役に立つかもしれない、という期待が、何よりのモチベーションになりました。
この記事が、これから個人開発に挑戦しようとしている方や、同じような技術スタックで奮闘している方の、何かしらのヒントになれば幸いです。
ぜひ、foliotreeであなたのポートフォリオを作成し、その才能を世界へ発信してみてください。
▼ foliotree - ポートフォリオ作成プラットフォーム
(気軽にご意見ください！)
Discussion