はじめに
先日、Next.js の勉強会で、データベース連携の実装について取り上げました 🫐
- Supabase
- Firebase
上記などは、有名でしょうか。
自前での構築不要で、簡単に DB を導入できるサービスは、
新規プロダクトの立ち上げにおいて、便利です。
その中でも、今回はNeon DB について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Neon（旧 Vercel PostgreSQL）とは？
Neon は、サーバーレスで設計された PostgreSQL データベースサービスです。
簡単に、DB を構築し、アプリに連携することができます！
特徴は、：
- サーバーレスアーキテクチャ: インフラ管理が不要で、使用した分だけ支払う（無料から OK）
- Git 風のブランチ機能: 本番 DB から開発・テスト用の環境を瞬時に作成可能
- スケーラビリティ: 使用量に応じて自動的にスケール
- 高速: 最新のストレージ技術による高速なパフォーマンス
- Vercel 統合: Vercel プロジェクトとの簡単な連携
以前は、Next.js の公式チュートリアルにも登場する、
「Vercel PostgreSQL」として、提供されていました。
現在は、Neon ブランドとして独立し、Vercel の marketplace から利用できます！
Vercel Postgres から Neon へは、いつ移行されたのですか？
公式によると、
移行はいつ起こりましたか？
移行は 2024 年第 4 四半期に始まり、2025 年第 1 四半期に完了しました。Vercel Postgres ストアは、Neon Postgres の Vercel ネイティブ統合に自動的に移行されました。
2025 年に入ってから、1~2 月には移行が完了したようです！
なので、以前と同じように、Vercel のプラットフォームの一部として(Vercel Postgres)利用する場合は、Vercel Marketplace の Neon を使用する必要がありますね！
Neon のセットアップ・使い方
Vercel の Marketplace から、利用する手順をざっくり紹介します！
1. Vercel ダッシュボードにログイン
まずは、Vercel にログインしてください！
そして、接続したいリポジトリを Vercel ダッシュボードで選択します！
もし、まだの場合は、GitHub のリポジトリを Vercel に連携し、デプロイをします！
2. 「Storage」タブ > 「Connect Database」を選択
Vercel 上で、ストレージのタブに移動します！
そして、下記のように、「Connect Database」を選択します！
3. Neon を選択し、「Continue」 > 「Connect」をクリック
そしたら、 Neon を選択し、「Continue」をクリックします！
必要な設定を行い、「Connect」をクリックすることで、Vercel 上のプロジェクトと、連携が完了します！
これだけで完了です 👍
本番用の環境変数は、自動的に設定されます。
あとは、
- ローカルに
.env.localを作成 - SQL エディタでデータベーステーブルを作成
そして、DB に接続し、ローカルでの開発を開始できます！
なぜ Neon なのか？
個人的には、Neon の魅力は、導入のしやすさです！
冒頭の特徴と重なりますが、
下記が特に嬉しいです：
- Vercel のダッシューボード上から簡単に導入できる
- 本番 DB から開発・テスト用環境の DB まで作成できる
- 無料枠も豊富
Neon の無料枠について
当記事執筆時点（2025/04/02）では、
- 10 projects まで無料で使えます
- 月 190 時間分の CPU 時間
- 枠を超えると停止（自動課金なし）
Supabase と比較しても、同等かそれ以上の無料枠の充実です！
Vercel にデプロイしたプロジェクトに関しても、
複数プロジェクトを Neon に接続できることも、確認しています 😎
そもそも、サーバーレスな構成の利点は？
Next.js やサーバーレス構成が人気を集める大きな理由の 1 つは、「フルスタック」開発の簡素化にあります。
これにより：
- フロントエンドとバックエンドの境界を取り払い
- TypeScript など同一言語・フレームワークでの開発が可能
- 開発から公開までの時間と労力を大幅に削減
特に変化の速い IT 製品では、製品の迅速な市場投入が競争力の鍵となります。
開発して公開するまでの時間・労力の短縮
Next.js は初期から「ゼロコンフィグ」という特徴を打ち出していました。
この哲学は、複雑な設定作業を排除し、開発者が本質的な実装に集中できる環境を提供するという意味です。
このような、新規プロダクトの立ち上げ ~ スケールの段階にフォーカスしているのは、
最近の開発者向けサービスのトレンドとも一致しており、Vercel のデプロイ体験にも表れています。
Neon もこの流れに沿って、Vercel ダッシュボードから簡単に DB を構築・連携できる仕組みを提供しています。
このような簡便さが、サーバーレスアーキテクチャの最大の強みですね！
もちろん、大規模システムや、仕様が詳細まで固まっているなど、
従来型の分離アーキテクチャが適しているケースも十分あります。
そもそも、時間がかかるなら、
サーバーレスではなく、従来の通りバック・フロント分けて開発すれば良いです w
プロジェクトの性質に応じて最適な選択をすることが重要ですね！！
おわりに
最後まで読んでいただき、ありがとうございます 🥳
下記の、Next.js ハンズオン勉強会での、振り返りのような記事ですが、
少しでも参考になれば、嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion