Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを...
Search
rokuosan
May 29, 2025
Programming
0
110
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
rokuosan
May 29, 2025
Tweet
Share
More Decks by rokuosan
See All by rokuosan
Kotlin で始める MCP 入門
rokuosan
0
33
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
210
KC3 2024 Dockerで始める自宅サーバー入門
rokuosan
0
140
お手軽アウトプット環境を求めて
rokuosan
0
150
Kotlinを使ってマイクラ鯖をWebで管理するアプリケーションを作るつもりでギリギリ間に合う予定だったけど非同期処理に躓いて大失敗した話
rokuosan
0
160
Other Decks in Programming
See All in Programming
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
270
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
120
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
360
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
110
型安全RESTで爆速プロトタイピング – Hono RPC実践
tacke_jp
0
110
從零到一:搭建你的第一個 Observability 平台
blueswen
1
740
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
370
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.9k
複数アプリケーションを育てていくための共通化戦略
irof
9
3.6k
イベントストーミングから始めるドメイン駆動設計
jgeem
4
780
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
346
40k
How GitHub (no longer) Works
holman
314
140k
Become a Pro
speakerdeck
PRO
28
5.4k
Building an army of robots
kneath
306
45k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
The Cult of Friendly URLs
andyhume
79
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Transcript
OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)
About me (5.0s) • id:rokuokun / rokuosan / ろくお •
若者です • 趣味 ◦ Kotlin, Go ◦ ではない→ Perl, TypeScript • https://x.com/rokuosan_dev
このLTの内容 • 二番煎じです • 大体これと同じことをやります ◦ mizchi さんの 「遂に Cloudflare
+ Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た」 ◦ https://zenn.dev/mizchi/articles/cloudflare-opennext-prisma-no-rust ◦ 違いは DB 周りと Hono を載せる部分 • 個人開発向けです
すでに記事あります • 気になった人は読んでみてください • https://blog.km3.dev/entry/20250527/1748280176
知っておくべきこと • Cloudflare Workers ◦ Cloudflare の Edge Computing •
OpenNext ◦ Next.js の脱 Vercel をするために頑張っているプロジェクト ◦ AWS 、 Cloudflare 、 Netlify をサポート(2025/05/29現在) • Hono ◦ ナウなヤングにバカウケのフレームワーク
OpenNext on Cloudflare Workers のセットアップ
超簡単 1 ステップ • これで OpenNext on Cloudflare Workers が出来上がる
• 今日はこれだけ覚えて帰ってください。
さっきデプロイしたやつ • https://kyototechtalk-8.km3.workers.dev/ • 大迫力の Next.js のランディングページが見えるはず
お手軽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 にいい感じのコードを追加する
(ちなみに)OpenNext に差し替えるには • 公式ドキュメント通りに進めるだけ ◦ https://opennext.js.org/cloudflare/get-started • next.config.ts に2行加える(伏線) •
package.json の scripts に↓を書いておく
やっておくと良いこと • キャッシュ設定 ◦ Workers では next.config.ts 上での Cache-Control ヘッダ設定ができない
◦ public/_headers に以下の内容を書いておく(デフォルトのNext.jsと同じ設定)
App Router に Hono を入れる
Catch-all Route に Hono をおく • src/app/api/[[...route]]/route.ts に↓を書く
Cloudflare D1 と接続する
Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext
ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって?
Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext
ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって? ◦ ↓これでローカルに SQLite を立ててくれる(伏線回収)
Cloudflare D1 with Drizzle ORM • マイグレーション ◦ 作成は npx
drizzle-kit generate ◦ 実行は npx wrangler d1 migrations apply
Cloudflare D1 with Drizzle ORM getCloudflareContext()からのDBを Drizzle で扱えるように Middleware で切り替える
Hono のうまみを享受する
Hono Client を使う • hc でクライアント作成 • client.<Endpoint>でAPI呼び出し • おまけで型情報がついてくる
Hono Client を使う(SSR) • SSRも当然できるぞ!
この構成のいいところ
メリット • Next.js の資産を大体使える • Next.js でバックエンド処理を書かなくていい ◦ いちいちディレクトリ切って route.ts
とか書かなくていい • バックエンドとフロントエンドでアーキテクチャを変更できる ◦ Next.js の制約から離れてある程度自由に書くことができる ◦ やりたければクリーンアーキテクチャぽくもかける • 安い
デメリット • OpenNext の開発サイドが疲れるリスク ◦ 依存が増えると言えることではある • 常にアップストリームに追従しているとは限らない ◦ とはいえ、更新されてすぐにバージョン上げることはない
• 実は無料枠だとすぐに超えそう ◦ 3MiB 上限だけど、この時点で大体 2.4 MiB ある(そんな)
おわり
さっき作ったリポジトリ • https://github.com/rokuosan/kyototechtalk-8
OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)