OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する

Transcript

1. OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)
2. About me (5.0s) • id:rokuokun / rokuosan / ろくお • 若者です • 趣味 ◦ Kotlin, Go ◦ ではない→ Perl, TypeScript • https://x.com/rokuosan_dev
3. このLTの内容 • 二番煎じです • 大体これと同じことをやります ◦ mizchi さんの 「遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た」 ◦ https://zenn.dev/mizchi/articles/cloudflare-opennext-prisma-no-rust ◦ 違いは DB 周りと Hono を載せる部分 • 個人開発向けです
4. すでに記事あります • 気になった人は読んでみてください • https://blog.km3.dev/entry/20250527/1748280176
5. 知っておくべきこと • Cloudflare Workers ◦ Cloudflare の Edge Computing • OpenNext ◦ Next.js の脱 Vercel をするために頑張っているプロジェクト ◦ AWS 、 Cloudflare 、 Netlify をサポート（2025/05/29現在） • Hono ◦ ナウなヤングにバカウケのフレームワーク
6. OpenNext on Cloudflare Workers のセットアップ
7. 超簡単 1 ステップ • これで OpenNext on Cloudflare Workers が出来上がる • 今日はこれだけ覚えて帰ってください。
8. さっきデプロイしたやつ • https://kyototechtalk-8.km3.workers.dev/ • 大迫力の Next.js のランディングページが見えるはず
9. お手軽2ステップ • npm create cloudflare で Next.js 向けテンプレートをつくる ◦ npm create cloudflare@latest -- --framework=next --platform=workers ◦ Next.js on Cloudflare Workers が出来上がる • OpenNext に差し替える ◦ npm install @opennextjs/cloudflare@latest ◦ next.config.ts にいい感じのコードを追加する
10. （ちなみに）OpenNext に差し替えるには • 公式ドキュメント通りに進めるだけ ◦ https://opennext.js.org/cloudflare/get-started • next.config.ts に2行加える（伏線） • package.json の scripts に↓を書いておく
11. やっておくと良いこと • キャッシュ設定 ◦ Workers では next.config.ts 上での Cache-Control ヘッダ設定ができない ◦ public/_headers に以下の内容を書いておく（デフォルトのNext.jsと同じ設定）
12. App Router に Hono を入れる
13. Catch-all Route に Hono をおく • src/app/api/[[...route]]/route.ts に↓を書く
14. Cloudflare D1 と接続する
15. Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって？
16. Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって？ ◦ ↓これでローカルに SQLite を立ててくれる（伏線回収）
17. Cloudflare D1 with Drizzle ORM • マイグレーション ◦ 作成は npx drizzle-kit generate ◦ 実行は npx wrangler d1 migrations apply
18. Cloudflare D1 with Drizzle ORM getCloudflareContext()からのDBを Drizzle で扱えるように Middleware で切り替える
19. Hono のうまみを享受する
20. Hono Client を使う • hc でクライアント作成 • client.<Endpoint>でAPI呼び出し • おまけで型情報がついてくる
21. Hono Client を使う（SSR） • SSRも当然できるぞ！
22. この構成のいいところ
23. メリット • Next.js の資産を大体使える • Next.js でバックエンド処理を書かなくていい ◦ いちいちディレクトリ切って route.ts とか書かなくていい • バックエンドとフロントエンドでアーキテクチャを変更できる ◦ Next.js の制約から離れてある程度自由に書くことができる ◦ やりたければクリーンアーキテクチャぽくもかける • 安い
24. デメリット • OpenNext の開発サイドが疲れるリスク ◦ 依存が増えると言えることではある • 常にアップストリームに追従しているとは限らない ◦ とはいえ、更新されてすぐにバージョン上げることはない • 実は無料枠だとすぐに超えそう ◦ 3MiB 上限だけど、この時点で大体 2.4 MiB ある（そんな）
25. おわり
26. さっき作ったリポジトリ • https://github.com/rokuosan/kyototechtalk-8
27. OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)