1. HonoX とは？
HonoX は、超高速 Web フレームワーク Hono をベースにした
フルスタック Web フレームワークです。
Hono + React + Vite + SSR
を、最小構成でまとめたのが HonoX です。
特徴
- 🚀 起動がとても速い
- 📦 構成がシンプル
- 🌍 Edge（Cloudflare Workers / Deno / Bun）向き
- 🧠 ブラックボックスが少ない
2. Next.js と HonoX ― 思想の違い
Next.js の思想
Next.js は「フルスタック Web アプリの標準」を目指している
- 巨大なエコシステム
- 多機能（App Router / RSC / Server Actions）
- 規約が多い
- フロントエンド主導
HonoX の思想
HonoX は「Web アプリの最小構成」を重視している
- 速さと理解しやすさ
- Edge ファースト
- バックエンド寄り
- 必要なものだけ自分で足す
👉 同じフルスタックでも目指している方向が違う
3. アーキテクチャの違い
Next.js:
ブラウザ → Next.js → Node / Edge → DB
HonoX:
ブラウザ → HonoX(Hono) → Edge → DB
| 観点 | Next.js | HonoX |
|---|---|---|
| フレームワーク層 | 厚い | 薄い |
| 実行環境 | Node / Edge 混在 | Edge 前提 |
| 起動速度 | 遅め | 速い |
| 挙動の分かりやすさ | やや難 | 分かりやすい |
HonoX は 「薄い＝何が起きているか分かる」 のが大きな特徴です。
4. 環境構築（最短で動かす）
npm create hono@latest my-honox-app
cd my-honox-app
npm install
npm run dev
http://localhost:5173
👉 ここで すぐ動く体験 ができるのが HonoX の強みです。
5. ディレクトリ構成の違い
Next.js（App Router）
app/
└ users/
└ page.tsx
- page / layout / loading / error など規約が多い
HonoX
app/routes/
└ users.tsx
export default function Users() {
return <h1>Users</h1>
}
「ファイル = ページ」
このシンプルさが HonoX の魅力です。
6. レイアウトの書き方
// app/layout.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
export default jsxRenderer(({ children }) => {
return (
<html>
<body>
<header>HonoX App</header>
<main>{children}</main>
</body>
</html>
)
})
Next.js の layout.tsx に近い感覚で使えます。
7. API 実装の違い（重要）
Next.js（Route Handlers）
export async function GET() {
return Response.json({ message: 'hello' })
}
- Next.js 独自仕様
- Node / Edge の差異を意識しがち
HonoX（Hono）
import { Hono } from 'hono'
const app = new Hono()
app.get('/api/hello', (c) => {
return c.json({ message: 'hello' })
})
export default app
「普通の Web フレームワーク感」
バックエンド経験者ほど HonoX は理解しやすいです。
8. データ取得の考え方の違い
※ RSC（React Server Components）や Server Actions については、本記事ではあえて触れていません。
Next.js の中核となる機能ではありますが、ここで扱うと話題が重くなってしまうため、入門編では対象外としています。
Next.js
- Server Components
- Server Actions
- クライアント / サーバ境界が曖昧
便利ですが、慣れるまで混乱しやすいです。
HonoX
- 明示的に API を叩く
- SSR / CSR が分かりやすい
- HTTP を意識した設計
👉 BFF / API 中心設計と相性が良い
9. パフォーマンスの体感差
| Next.js | HonoX | |
|---|---|---|
| dev 起動 | 数十秒 | 数秒 |
| cold start | 重め | 軽い |
「触ってすぐ速い」と感じやすい
10. どちらを選ぶべきか？
Next.js が向いている
- フロントエンド主導
- 大規模チーム
- 豊富な事例・ライブラリが欲しい
HonoX が向いている
- 軽量なフルスタックが欲しい
- Edge 前提
- API 設計を自分で握りたい
- 社内ツール / 管理画面 / BFF
まとめ
Next.js と HonoX は競合ではなく「思想の違う選択肢」 です。
- Next.js = 総合家電
- HonoX = シンプルな工具箱
「全部入り」ではなく、理解しやすさや軽さを重視するのであれば、
HonoX はとても良い選択肢だと感じました。
次回があれば、実際に HonoX で作ったアプリを例に、もう少し踏み込んだ話もしてみたいと思います。