Lovable と Bolt.new を比較してみた ～ Next.jsか？GitHub連携か？～

## はじめに
[Lovable](https://lovable.dev/) と [Bolt.new](https://bolt.new/) は、**AI駆動のWebアプリ開発サービス**として注目されています。  
開発エンジニアとしてこれらをプロジェクトで活用する場合、**プロジェクトのひな形作成の役割**を担うのではないかと思いました。  
しかし、どちらも発展途上の部分があり、次のような観点で**ベースのアーキテクチャ**を踏まえた選定が必要だと感じています。

- **Next.js 対応の有無**  
- **GitHub連携の有無**  
- **React + Supabase 構成への対応**  
- **SSR や大容量処理が必要かどうか**

ここまでのポイントをふまえると、私は以下のように考えています。

> **Next.js + Supabase** は SSR や API Routes を使えるため、**自由度が高く、大量データや時間のかかる処理にも柔軟に対応**しやすい。  
> 一方で **React + Supabase** だと、フロントだけでは 外部APIキーを安全に隠せないため **Supabase Edge Functions** に頼る必要があり、**Edge Functions のタイムアウトやリソース制限に引っかかりやすい** という弱点がある。

---

## Lovable と Bolt.new の比較表

下表では、**Lovable** と **Bolt.new** を「GitHub連携」「Next.js 対応」「React + Supabase 構成」「将来のGitHub連携可能性」の4点で比較しました。  

| 項目                           | **Lovable**                                                                                                  | **Bolt.new**                                                                                       | **判定（優位）**                                                                                 |
|:-------------------------------|:--------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------|
| **GitHub連携**                | **◎（可能）**                                                                                                 | **×（現在不可）**                                                                                  | **Lovable が優位** <br> (現時点で GitHub リポジトリとの連携が可能)                                 |
| **Next.js 対応**              | **×（不可）**                                                                                                 | **◎（可能）**                                                                                      | **Bolt.new が優位** <br> (Next.js を公式にサポートし開発可能)                                      |
| **React + Supabase 構成**     | **○（一部可能）** <br>「**React + Supabase の構成で Supabase の function で行えることができるのであれば選択肢としてあり**」 | **◎（柔軟に対応可能）** <br> (React・Next.js 双方に対応)                                            | **Bolt.new がやや優位** <br> (React / Next.js の両方に対応し、開発の幅が広い)                       |
| **将来の GitHub 連携可能性**  | **－（既に対応済み）**                                                                                         | **○（将来対応の見込み）**                                                                           | **ほぼ互角** <br> (Lovable はすでに連携済み、Bolt.new は将来対応の可能性あり)                      |

---

## 現状のポイント

### Lovable
- **GitHub 連携**はすでに可能だが、**Next.js 非対応**なのが痛い。  
  - SSR や Next.js 特有の機能を使った開発ができないため、制約がある。  
- **React + Supabase** 構成を使うなら、Supabase Functions で外部APIを叩く等の工夫が必要。

### Bolt.new
- **Next.js** が使えるため、SSR や大型フレームワークでの開発が可能。  
- ただし **GitHub 連携がまだない**のが痛い。将来的にはサポートされる可能性があるが、現時点で必要なら不利。  
- Next.jsで開発できるが、**supabase連携ボタンがまだ未対応**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/e2702557-5aef-ccc6-4b00-d4562d063dab.png)

- React + Supabase についてはもちろん対応可能で、幅が広い。

> **「Lovable：Next.js非対応」「Bolt.new：GitHub連携不可」** という状況のため、現時点ではどちらも一長一短と言えます。

---

## Next.js + Supabase と React + Supabase

それぞれのアーキテクチャを簡単に比較します。

### 1. Next.js + Supabase
- **SSR や API Routes** を活かして、大容量・長時間処理でも対応しやすい。  
- **APIキーをサーバーサイドで安全に管理**できる。  
- **ホスティング**（Vercel など）や自前運用によってコスト面・運用面は変動。

### 2. React + Supabase
- フロントとバックをシンプルに分離できるが、**キー管理が難しい**ため、セキュリティ面で外部APIの呼び出しは **Supabase Edge Functions** 頼り。  
- Edge Functions の**実行時間制限**や**メモリ制限**に気をつける必要がある。  
- SSR がないため、**SEO や初回表示速度**は SSR ほど最適化できない。

---

## まとめ

- **Lovable と Bolt.new** は、いずれも**AI駆動のWebアプリ開発**に役立ちそうなサービスですが、対応範囲に差があります。  
  - **Lovable**: GitHub連携◎ / Next.js ×  
  - **Bolt.new**: Next.js ◎ / GitHub連携 ×  
- **Next.js + Supabase** → SSR や API Routes の恩恵で**大容量・長時間処理にも柔軟**。  
- **React + Supabase** → **Edge Functions** による**リソース制限**を踏まえる必要あり。  
- 今後のアップデートによって使い勝手は変化するかもしれませんが、現状は「Lovable：Next.js非対応」「Bolt.new：GitHub連携不可」がネックで、**引き分け**と言えるでしょう。

### 参考リンク
- [Lovable 公式サイト](https://lovable.dev/)
- [Bolt.new 公式サイト](https://bolt.new/)
- [Next.js 公式ドキュメント](https://nextjs.org/)
- [Supabase 公式ドキュメント](https://supabase.com/docs)

以上、Lovable と Bolt.new の比較と、Next.js + Supabase / React + Supabase のアーキテクチャ考察でした。プロジェクト要件に応じて、どちらがより適しているか検討してみてください！