【ポートフォリオ作成】Next.jsでWebアプリを作ってVercelにデプロイしてみた
エンジニアにとって、ポートフォリオは自分のスキルをアピールするための重要なツールです。
特にWebエンジニア志望であれば、動くWebアプリを見せることが、自身の強みを伝える大きな武器になります。
今回、私はReactとNext.jsを使ってWebアプリを作成し、Vercelにデプロイ、さらにSupabaseを使ったデータベース連携まで体験しました。
この記事では、その体験を通して感じたこと、学んだことをまとめていきます。
目次
ポートフォリオ作成の準備
学習リソース
Webアプリ開発にあたって、まずは基本的な学習からスタートしました。
- Reactについては、Udemyの講座を参考にしました。コンポーネントの作り方や、状態管理の基礎を学習できました。
- Next.jsは、公式チュートリアルをもとに学びました。ページルーティングやデータ取得、さらにVercelへのデプロイ方法とSupabase連携まで、実践できる内容になっています。
学習リソースを絞ったことで、迷わずに実装に進むことができました。
開発環境
開発環境はシンプルにまとめました。
- Node.js と npm：パッケージ管理と開発サーバー用
- VSCode：コードエディタ。拡張機能を使いながら効率的にコーディング
- GitHub：ソースコードの管理とデプロイ用リポジトリ作成
最低限のツールで始められるので、開発環境構築のハードルは高くありませんでした。
Webアプリ開発に使った技術
今回のポートフォリオでは、次の技術を使いました。
- React：コンポーネントベースの開発。UIパーツを再利用できるのが便利です。
- Next.js：ページ単位のルーティングや、ビルド・デプロイのしやすさが特徴。
- Vercel：Next.js公式が開発したホスティングサービスで、無料で使え、設定も非常に簡単です。
- Supabase：オープンソースのFirebase代替。認証、データベース連携を簡単に実装できます。
フロントエンドとバックエンドをつなぐ体験を、手軽に完結できたのは非常に大きな学びでした。
実際にWebアプリを作ってみて
Next.jsのプロジェクトを作成し、基本的なページ遷移やコンポーネント分割をしながら開発を進めました。
最初は細かい設定や構成に戸惑いましたが、公式チュートリアルをなぞるように進めることで、少しずつ手が慣れていきました。
特に印象的だったのは、Supabase連携です。
公式チュートリアルに沿って設定を進めると、認証機能やデータベースへの読み書きがスムーズに実装できました。
APIキーの管理や、リアルタイムなデータ更新などもチュートリアルで解説されていたので、実践的な知識が自然に身につきました。
Vercelにデプロイしてみた
デプロイの流れ
デプロイ作業も、Next.js公式チュートリアルの流れに沿って進めました。
最初からデプロイまでを見据えたチュートリアル構成になっているので、迷わず作業できました。
具体的な流れは次の通りです。
- GitHubにソースコードをプッシュ
公式チュートリアルに従い、リポジトリを作成してコードをアップロード。 - Vercelにサインアップ＆GitHub連携
Vercelのアカウントを作成し、GitHubアカウントと連携します。 - リポジトリを選択してデプロイ
Vercelのダッシュボードからリポジトリを選び、クリックだけでビルドとデプロイが自動で進みます - 数分で完了
ビルドが完了すると、すぐにURLが発行され、インターネット上に公開されました。
デプロイ後の感想
初めてのデプロイでしたが、手軽さに驚きました。
デプロイにありがちな複雑な設定やサーバー構築作業もなく、スムーズにポートフォリオを公開することができました。
また、コードを更新してGitHubにプッシュするだけで自動デプロイされる仕組みは、実際の開発フローを体験する上でも非常に役立ちました。
Supabaseとの連携も、デプロイ後すぐに動作確認ができ、フロントエンドとバックエンドを統合した開発・公開まで一気通貫で体験できたのは貴重な経験でした。
これから作る人へのアドバイス
これからポートフォリオを作ろうとしている方には、次のことを伝えたいです。
- Next.js公式チュートリアルがとても親切
開発からデプロイ、バックエンド連携（Supabase）まで一通り体験できます。 - Vercelのデプロイは非常に簡単
インフラの知識がなくても、ボタン操作だけでアプリを公開できます。 - まずは小さく作って公開するのが大事
シンプルでもいいので、完成したものを作り、世の中に出す経験が大切です。
動くものが手元にあることで、自信にもなり、次の学習にも自然とつながっていきます。
まとめ
今回、ReactとNext.jsを使ってWebアプリを作成し、Vercelにデプロイ、Supabaseでバックエンド連携まで体験しました。
ポートフォリオを形にできたことはもちろん、開発から公開、データベース連携までの一連の流れをスムーズに経験できたのは非常に大きな収穫でした。
これからも少しずつアプリを作りながら、ポートフォリオを充実させていきたいと思います。
もしポートフォリオ作りに悩んでいる方がいれば、ぜひNext.jsとVercel、そしてSupabaseに挑戦してみてください！
テクニケーションでは案件選択制を取り入れており、自身のスキルを伸ばしたい分野や興味のある分野に特化した業務に取り組めます。
この制度を通じて、得意分野や挑戦したい分野に専念できるため、業務に対する思いややりがいを持って遂行することが可能です。それだけでなく、自身で案件を選ぶことはエンジニア自身の成長や満足感にもつながります。
また、単価給与連動制も導入しており、実力に見合った報酬を得られる仕組みです。自身の価値が明確になるので年収アップにつながるだけでなく、業務に対するモチベーションも大きく影響します。
テクニケーションでの働き方に少しでも興味を持った方はぜひカジュアル面談をお申し込みください。
